CSS3: border-radius 자세히 설명

경계 반경

기본 구문:

　경계 반경: 없음 | {1,4} [/ {1,4} ]?

값 범위:

　: 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다. 부정적일 수 없습니다.

border-radius 속성에 하나의 값만 지정하면 4개의 둥근 모서리가 생성됩니다.

그러나 네 모서리를 각각 지정하려면 다음 규칙을 사용할 수 있습니다.

• 4가지 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 아래 모서리, 네 번째 값은 왼쪽 아래 모서리입니다.
• 세 가지 값: 첫 번째 값은 왼쪽 상단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단, 세 번째 값은 오른쪽 하단입니다.
• 값 2개: 첫 번째 값은 왼쪽 상단 및 오른쪽 하단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단입니다.
• 하나의 값: 네 개의 필렛 값은 동일합니다

다음으로 예제를 통해 border-radius의 구체적인 사용법을 알아보세요.

1: border-radius에 값이 하나만 있는 경우 네 모서리의 둥근 모서리 설정이 동일하며 효과도 동일합니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo1 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 10px</span>; /*4个角的值相等*/
<span style="color: #008080;">7</span> }

효과:

두 번째: border-radius에 두 개의 값이 있는 경우 왼쪽 상단 모서리와 오른쪽 하단 모서리가 동일하고 오른쪽 상단 모서리와 왼쪽 하단 모서리가 동일합니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo2 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px 10px</span>;
<span style="color: #008080;">7</span> }

효과:

3: border-radius에 세 개의 값이 있는 경우 왼쪽 상단이 첫 번째 값을 취하고 오른쪽 상단이 왼쪽 하단과 동일하며 두 번째 값을 취하고 오른쪽 하단이 세 번째 값을 취합니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo3 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px 10px 15px</span>;
<span style="color: #008080;">7</span> }

효과:

Four: border-radius는 4개의 값을 설정합니다. 이때 첫 번째 값은 왼쪽 위에서 가져오고, 두 번째 값은 오른쪽 위에서 가져오고, 세 번째 값은 오른쪽 아래에서 가져옵니다. 왼쪽 하단에서 가져옴:

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo4 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px 10px 15px 20px</span>;
<span style="color: #008080;">7</span> }

효과:

이해하고 기억하기 쉬움:

아래 그림과 같이 왼쪽 상단부터 1, 2, 3, 4 네 모퉁이가 있습니다. 값의 갯수에 관계없이 1부터 시작하여 값이 없으면 대각선 값을 취합니다. 물론, 값이 1이면 이렇게 4개의 각도는 수평 반경과 수직 반경이 동일합니다. 동일하면 잘 이해할 수 있습니다. 오류가 발생하지 않습니다.

다음으로 수평 및 수직 반경의 세분화를 살펴보겠습니다.

먼저 간단한 데모를 해보자——

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo5 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 20px / 40px</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">水平半径/垂直半径</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">7</span> }

효과:

보시다시피 가로 및 세로 반경 값은 더 이상 동일하지 않습니다. 숫자 1, 2, 3, 4는 여전히 일치할 수 있지만 가로 및 세로 반경은 구분되어 있습니다. .

20px / 40px 슬래시 '/' 앞에는 가로 반경 값이, 뒤에는 세로 반경 값이 옵니다. 마찬가지로 각 모서리의 수평 및 수직 반경도 다르게 설정할 수 있습니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo6 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 10px 20px 15px 30px / 40px 5px 30px 10px</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">水平半径/垂直半径</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">7</span> }

효과:

각 모서리는 서로 다른 가로 및 세로 반경으로 설정되어 있으며 각각 고유한 스타일을 가지고 있습니다. 어떻게 값을 설정하든 왼쪽 상단부터 하나씩 번호를 매길 수 있습니다. 값을 얻지 못한 경우 반대쪽 모서리의 값을 가져옵니다.

이제 상상력을 사용하여 다양한 반경을 설정하고 특별한 패턴을 만들 수 있습니다. 공간을 낭비하지 않고 여기에 모두 나열하겠습니다.

테두리 반경을 사용하여 원을 그립니다

데모 먼저---

1. 경계 없는 원

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo7 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span>     <span style="color: #008000;">/*</span><span style="color: #008000;">border: 2px solid #ff0000;</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">7</span> }

효과:

테두리가 없는 원의 경우 너비와 높이만 동일하면 되며 테두리 반경은 너비와 높이의 절반입니다.

2. 테두리가 있는 원

테두리가 있는 원의 경우 테두리 너비를 고려해야 합니다. 반례부터 시작해 보겠습니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo8 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 5px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">7</span> }

效果：

可以看到，忽略了边框的宽度，只设置border-radius为宽高的一半，出来的就不是圆了。

 

再看一个考虑了边框的demo

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo9 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 5px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 45px</span>;
<span style="color: #008080;">7</span> }

效果：

结果就显而易见了。所以在画圆的时候还要注意有无边框。

 

 

 

 

最后附上一个小demo。

<span style="color: #800000;"><!DOCTYPE html>
<html>
<head>
    <style>
        body
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;">#ffffff</span>;
        }<span style="color: #800000;">

        div.polaroid
        </span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
            top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
            animation</span>:<span style="color: #0000ff;">localShine 2s linear infinite</span>;<span style="color: #ff0000;">
            border-radius</span>:<span style="color: #0000ff;"> 8px
        </span>}<span style="color: #800000;">

        @keyframes localShine</span>{<span style="color: #ff0000;">
            from {
                box-shadow</span>:<span style="color: #0000ff;">0 0 0 0 #E6E6E6</span>;
            }<span style="color: #800000;">
            to </span>{<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;">0 0 0 6px #cbcbcb</span>;
            }<span style="color: #800000;">
        }

    </style>
</head>
<body>

<div class="polaroid">
</div>

</body>
</html></span>

 效果：