CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예
- yulia원래의
- 2018-09-07 13:53:403709검색
CSS3의 테두리 반경은 둥근 모서리 효과를 얻기 위해 사용됩니다. 다음은 그 사용법을 자세히 설명합니다. 마지막으로 테두리 반경을 사용하여 원을 그리는 방법을 설명하는 데 사용됩니다.
border-radius 속성은 네 가지 border-*-radius 속성을 설정하기 위한 약식 속성입니다.
참고: 왼쪽 하단 모서리를 생략하면 오른쪽 상단 모서리도 동일합니다. 오른쪽 아래 모서리를 생략하면 왼쪽 위 모서리도 동일합니다. 오른쪽 위 모서리가 생략되면 왼쪽 위 모서리도 동일합니다. 해당 값은 길이 값 또는 100%일 수 있습니다.
네 가지 값이 주어지면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래입니다. 즉, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
세 가지 값이 주어지면 왼쪽 위를 나타냅니다. 모퉁이, (오른쪽 위 모퉁이, 왼쪽 아래 모퉁이) 모퉁이), 오른쪽 아래 모퉁이
두 개의 값이 주어지면 각각 (왼쪽 위 모퉁이, 오른쪽 아래 모퉁이), (오른쪽 위 모퉁이, 왼쪽 아래 모퉁이)를 나타냅니다
때 하나의 값이 주어지면 네 모서리에 동일한 효과를 나타냅니다
예제 1: 하나의 값 제공
div{width: 150px;height: 150px;border-radius: 15%;background: red;}렌더링:
예 2: 두 개의 값 제공
div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}렌더링:
예 3: 세 가지 값 제공
div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}Rendering:
예 4: 네 가지 값 제공
div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}Rendering:
예: 국경 반경을 만들려면 Circle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
.a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
</style>
</head>
<body>
<div class="a1">
<div class="a2">HELLO</div>
</div>
</body>
</html>Rendering:
위는 둥근 모서리입니다. 자세한 소개는 초보자도 더 많이 시도하고 연습할 수 있습니다!
위 내용은 CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!