방법: 1. 원형 요소를 div 컨테이너에 배치합니다. 2. div의 높이를 원의 반경으로 설정하고 div의 너비를 원의 지름으로 설정하여 div를 배치할 수 있습니다. 3. div 요소에 "overflow:hidden" 스타일을 추가하고 div 외부의 반원을 숨깁니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서 원의 절반을 숨기는 방법
CSS에서는 먼저 원형 요소를 div에 넣은 다음 div의 높이를 원의 반경으로 설정하고 너비를 원의 반경으로 설정합니다. 원 직경 길이.
이때, Overflow 속성을 이용하면 div 너머의 원형 부분을 숨길 수 있습니다.
예제는 다음과 같습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .mask2{ width: 100px; height: 50px; overflow: hidden; } .round2{ width: 100px; height: 100px; background-color: cornflowerblue; border-radius: 50px; } </style> </head> <body> <div class="mask2"> <div class="round2"></div> </div> </body> </html>
출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS에서 원의 절반을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!