CSS에서 테두리를 둥근 모서리로 설정하는 방법
- 青灯夜游원래의
- 2021-09-14 16:21:3314658검색
CSS에서는 border-radius 속성을 사용하여 테두리를 둥근 모서리로 설정할 수 있습니다. 4개의 둥근 모서리 반경을 설정하려면 테두리 요소에 "border-radius:radius 값"만 추가하면 됩니다. 동시에 네 모서리가 모두 둥근 모서리로 설정됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서 둥근 테두리를 설정하는 가장 일반적이고 간단한 방법은 border-radius 속성을 사용하는 것입니다.
CSS 둥근 모서리에는 border-radius("테두리 반경"을 의미) 속성 하나만 설정하면 됩니다. 네 모서리의 반경을 동시에 설정하려면 이 속성에 값을 제공합니다. em, ex, pt, px, 백분율 등 모든 합법적인 CSS 측정을 사용할 수 있습니다.
border-radius는 동시에 1~4개의 값을 설정할 수 있습니다.
1개의 값을 설정하면 4개의 필렛 모두 이 값을 사용한다는 의미입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px;
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>Rendering:
두 개의 값을 설정하면 왼쪽 상단과 오른쪽 하단이 첫 번째 값을 사용하고 오른쪽 상단과 왼쪽 하단이 두 번째 값을 사용한다는 의미입니다. 값.
값이 3개 설정되면 왼쪽 상단이 첫 번째 값, 오른쪽 상단과 왼쪽 하단이 두 번째 값, 오른쪽 하단이 세 번째 값을 사용한다는 의미입니다.
4개의 값을 설정하면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래(시계방향 순서)에 해당합니다.
border-radius는 슬래시를 사용하여 두 번째 값 세트를 설정할 수도 있습니다. 첫 번째 값 세트는 수평 반경을 나타내고 두 번째 값 세트는 수직 반경을 나타냅니다. 두 번째 값 집합도 동시에 1~4개의 값을 설정할 수 있으며 적용 규칙은 첫 번째 값 집합과 동일합니다.
관련 추천: "css 비디오 튜토리얼"
위 내용은 CSS에서 테두리를 둥근 모서리로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!