CSS3에서 둥근 모서리 효과 구현
- WBOY원래의
- 2022-08-11 17:16:263164검색
CSS3에서는 "border-radius" 속성을 사용하여 둥근 모서리 효과를 얻을 수 있습니다. 이 속성은 요소 외부 테두리의 둥근 모서리를 설정하는 데 사용되며 이 속성은 사용할 수 있는 축약형 속성입니다. 네 개의 둥근 모서리의 스타일을 각각 설정하려면 구문은 "요소 개체 {테두리 반경: 1-4 길이|% / 1-4 길이|%;}"입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3
border-radius에서 둥근 모서리를 달성하면 요소의 외부 테두리를 둥글게 설정할 수 있습니다. 하나의 반지름을 사용하면 원을 결정하고 두 개의 반지름을 사용하면 타원을 결정합니다. 이(타원형) 원과 테두리의 교차점은 둥근 모서리 효과를 만듭니다.
border-radius 속성은 최대 4개의 border-*-radius 속성을 지정할 수 있는 복합 속성입니다.
Syntax
border-radius: 1-4 length|% / 1-4 length|%;
참고: 각 반경에 대한 4개 값의 순서는 다음과 같습니다. 왼쪽 상단 , 오른쪽 위 모서리, 오른쪽 모서리 아래쪽 모서리, 왼쪽 아래 모서리. 왼쪽 아래 모서리를 생략하면 오른쪽 위 모서리도 동일합니다. 오른쪽 아래 모서리를 생략하면 왼쪽 위 모서리도 동일합니다. 오른쪽 상단 모서리를 생략하면 왼쪽 상단 모서리도 동일합니다.
길이는 곡선의 모양을 정의합니다.
% %를 사용하여 모서리의 모양을 정의합니다.
예제는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)
위 내용은 CSS3에서 둥근 모서리 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!