CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예-CSS 튜토리얼-php.cn

CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예

yulia

풀어 주다： 2018-09-07 13:53:40

원래의

3742명이 탐색했습니다.

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;}

로그인 후 복사

렌더링:

CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예

예 2: 두 개의 값 제공

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

로그인 후 복사

렌더링:

CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예

예 3: 세 가지 값 제공

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

로그인 후 복사

Rendering:

CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예

예 4: 네 가지 값 제공

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

로그인 후 복사

Rendering:

CSS3에서 테두리 반경을 사용하는 방법은 무엇입니까? border-radius를 사용하여 원을 그리는 방법을 설명하는 예

예: 국경 반경을 만들려면 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: