borderradius은 무슨 뜻인가요? 테두리 반경 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

borderradius은 무슨 뜻인가요? 테두리 반경 속성에 대한 자세한 설명

云罗郡主

Nov 10, 2018 pm 02:42 PM

많은 CSS 마스터에게는 borderradius가 낯설지 않지만 일부 초보자에게는 borderradius 속성이 그다지 익숙하지 않습니다. 그렇다면 borderradius는 무엇을 의미할까요? 테두리 반경 속성에 대해 이야기해 보겠습니다. #… 사실 가장 오래된 방법은 배경을 통해 달성하는 것이지만 만드는 것도 매우 번거롭습니다. 이제 CSS3에서는 border-radius 속성을 사용하여 모서리를 둥글게 만들 수 있습니다. 둥근 모서리 효과를 달성하는 데 문제가 발생합니다. [추천 도서:

CSS의 테두리 속성을 사용하여 삼각형을 그리는 방법

】

Many 사람들은 웹사이트를 개발하고, 이미지 사용을 별로 좋아하지 않으며, 이미지 대신 CSS 이미지를 사용하려고 합니다. 웹사이트에 이미지가 많으면 웹사이트에서 fttp 요청을 보내게 되고 전송량도 매우 커집니다. 그런 다음 테두리 반경 속성 Go를 사용하고 이미지에 둥근 모서리를 추가하여 아름다운 효과를 얻을 수 있습니다. 2: 테두리 반경 속성에 대한 자세한 설명

1.테두리 반경 구문:

border-radius: 길이 값 ;길이 값은 px 또는 백분율로 표시할 수 있습니다. 예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:50px;
        border:1px solid gray;
        border-radius:20px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

로그인 후 복사

표시 효과는 다음과 같습니다.

# 🎜🎜## 🎜🎜#

설명: 위 코드에서 border-radius 값은 20입니다. 즉 네 모서리가 모두 20이라는 의미입니다.

2. border-radius 작성 방법

CSS의 많은 속성은 margin 및 padding과 비슷하게 네 가지 방식으로 작성됩니다. 값을 설정하면 네 모서리의 반경이 10px이고 오른쪽 아래 모서리가 20px이면 오른쪽 위 모서리와 왼쪽 아래 모서리를 의미합니다.

borderradius은 무슨 뜻인가요? 테두리 반경 속성에 대한 자세한 설명 border-radius 속성에 세 개의 값이 있는 경우(예: border-radius:10px 20px 30px) 10px는 왼쪽 상단 모서리 반경을 나타내고 20px는 왼쪽 하단 모서리와 오른쪽 상단 모서리를 나타내고 30px는 오른쪽 하단 모서리를 나타냅니다. 값이 4개 있을 경우 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래이며 방향은 시계방향입니다.