둥근 테두리의 CSS 속성은 무엇입니까?
1. 둥근 테두리 소개
는 border-radius 속성을 통해 요소의 네 모서리를 설정하는 것입니다｛속성은 다음과 같습니다. 상속되지 않음｝ .
border-radius에는 위쪽, 왼쪽, 오른쪽, 아래쪽의 네 가지 속성이 있으며 픽셀을 설정하는 데 사용할 수 있습니다. 네 변이 모두 동일하도록 값을 직접 설정할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 5px solid red;
border-radius: 50px;
width: 50px;
height: 100px;
background-color: yellowgreen;
margin:auto;
box-shadow: 100px 100px 40px green;}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-radius 두 값을 동시에 설정할 수도 있습니다: 50px 99px, 이에 따라 위쪽과 아래쪽은 50px, 왼쪽과 오른쪽은 99px입니다. 테두리 반경을 시계 방향으로 설정하기 위해 세 가지 값을 설정할 수도 있습니다. 상단은 50px, 왼쪽과 오른쪽은 99px, 하단은 40px입니다.
2 border-radius: r을 사용하여 원을 설정할 수도 있습니다. 여기서 r은 반경의 크기를 나타냅니다(길이 단위 사용). r 값을 절반으로 설정해야 합니다. 요소의 높이와 길이. 높이와 너비가 같은 경우, 이 값을 선택하는 방법은 너비와 높이가 변경됨에 따라 원이 타원을 향해 전개되는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 5px solid red;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: yellowgreen;
margin:auto;
box-shadow: 100px 100px 40px green;}
</style>
</head>
<body>
<div></div>
</body>
</html>원:
타원형;
추천 튜토리얼: "css 튜토리얼"
위 내용은 둥근 테두리의 CSS 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!