둥근 테두리의 CSS 속성은 무엇입니까?-CSS 지식-php.cn

둥근 테두리의 CSS 속성은 무엇입니까?

hzc

풀어 주다： 2020-06-12 15:16:15

원래의

10383명이 탐색했습니다.

둥근 테두리의 CSS 속성은 무엇입니까?

둥근 테두리의 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>

로그인 후 복사

둥근 테두리의 CSS 속성은 무엇입니까?

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 속성은 무엇입니까?