CSS3에서 다중 테두리를 구현하는 방법에 대한 자세한 설명

CSS3의 box-shadow는 다중 테두리를 만드는 데 정말 강력합니다. 이 기사에서는 다중 테두리를 구현하는 CSS3 방법에 대한 자세한 설명의 초점이기도 합니다. 하지만 그 전에 더 나은 호환성을 갖춘 전통적인 방법을 살펴보겠습니다. 🎜>

방법 1: 여러 경계를 달성하기 위한 p 중첩.

렌더링:

html 코드

<p id="outer">
    <p id="inner">p嵌套实现多重边框</p>
</p>

css 코드

#outer {   
    width: 100px;   
    height: 100px;   
    background-color: bisque;   
    border: 10px solid brown;   
    position: relative;   
}   

#inner {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
}   
/*#outer,
#inner {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/

단점: 구조를 수정할 수 없거나 html 구조를 수정하는 데 드는 비용이 높을 수 있습니다. 여러 ps에 둥근 모서리가 설정되어 있으면 테두리가 맞지 않습니다. 아주. 둥근 다중 테두리 렌더링:

방법 2: 여러 테두리를 얻으려면 윤곽선+윤곽선 오프셋을 사용합니다.
두 개의 테두리 레이어만 그려야 한다면 외곽선을 사용할 수도 있습니다. 외곽선은 테두리 외부의 레이어로 테두리 원리와 동일합니다. 윤곽선 스타일을 설정하면 테두리 외부에 또 다른 테두리 레이어를 설정할 수 있습니다. 단, 내부 요소의 테두리 스타일이 변경되어도 개요 속성에 의해 설정된 테두리는 변경되지 않는다는 점에 유의하세요. 즉, 요소 ​​테두리의 모서리가 둥근 경우 윤곽선으로 그린 ​​가장 바깥쪽 테두리는 여전히 직사각형입니다. 이는 외곽선 그리기 테두리의 단점입니다.
렌더링:

html 코드

<p id="outline">outlie实现多重边框</p>

css 코드

#outline {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    outline: 10px solid brown;   
    outline-offset: 0px;   
    /*border和outline之间的距离*/
    margin: 20px;   
    /*因为outline不影响布局，使用margin给边框腾位置*/
}

장점: 테두리와 유사하며 점선, 실선 등 다양한 선 종류로 설정할 수 있습니다.

단점: 윤곽선은 레이아웃에 영향을 주지 않으며 테두리를 위한 공간을 만들기 위해 여백을 사용해야 합니다. 다른 요소에 의해 덮이는 것을 방지합니다. 컨테이너 자체에 둥근 모서리가 있으면 획이 둥근 모서리에 완전히 맞을 수 없습니다. 렌더링은 다음과 같습니다.

방법 3: 상자 그림자 외부 투영을 사용하여 여러 개를 만듭니다. 국경.
box-shadow 속성은 박스 모델의 그림자를 설정할 수 있습니다. 하지만 실제로는 테두리를 설정하는 기능도 있습니다. box-shadow는 5개의 매개변수를 전달할 수 있습니다. 처음 두 매개변수는 투영의 오프셋을 나타내고, 세 번째 매개변수는 투영의 흐림 정도를 나타내며, 네 번째 매개변수는 투영의 확장을 나타내고, 마지막 매개변수는 색상을 나타냅니다. 투영의. 그러나 네 번째 매개변수는 거의 사용하지 않습니다. 여기서 네 번째 매개변수를 사용하면 보다 적절한 값을 설정하여 테두리 효과를 시뮬레이션할 수 있습니다.
마찬가지로 box-shadow 속성은 ","로 구분된 여러 그림자 목록을 전달할 수 있습니다. 따라서 섀도우 목록을 정의하고 확장 매개변수의 값을 점진적으로 늘리면 여러 테두리 효과를 그릴 수 있습니다.
렌더링:

html 코드

<p id="boxShadow">boxshadow实现多重边框(外投影)</p>

css 코드

#boxShadow {   
    margin: 40px;   
    /*因为box-shadow不影响布局，使用margin给边框腾出位置*/
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   
    -webkit-box-shadow: 0 0 0 10px brown;   
    box-shadow: 0 0 0 10px brown;   
    /*参数分别为：水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/
}

장점: 여러 개의 둥근 모서리가 서로 완벽하게 정렬되는 동시에 목록을 수신하고 한 번에 여러 투영(예: 테두리)을 설정할 수도 있습니다. 확장 효과는 요소 자체의 모양을 기반으로 합니다. 요소가 직사각형이면 더 큰 직사각형으로 확장되고, 요소에 둥근 모서리가 있으면 둥근 모서리로 확장됩니다.

단점: CSS3 속성은 호환성이 낮습니다. box-shadow는 레이아웃에 영향을 주지 않습니다. 이 요소와 다른 요소의 상대적 위치가 중요한 경우 여백 및 기타 방법을 사용하여 이러한 요소에 추가 공간을 추가해야 합니다. "테두리"는 다른 요소에 의해 가려지지 않도록 공간을 만듭니다.

참고: 인라인 그림자(즉, 상자 그림자 추가 매개변수가 삽입되고 설정되지 않은 경우 기본값은 외부 그림자임)를 사용하는 것이 더 나은 선택인 것 같습니다. 인라인 그림자를 사용하면 그림자가 요소 내부에 나타날 수 있으므로 요소 내부에 여러 테두리를 위한 공간을 만들기 위해 패딩을 설정하는 것이 더 쉽습니다.

방법 4: 상자 그림자 내부 투영을 사용하여 여러 테두리를 만듭니다. (권장)

렌더링:

html 코드

<p id="moreboxShadow">boxshadow实现多重边框(内投影)</p>

css 코드

/*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/
#moreboxShadow {   
    width: 120px;   
    height: 120px;   
    border: 8px solid blue;   
    /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/
    -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    padding: 30px;   
    /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/
}

장점: 인라인 그림자를 사용하면 그림자가 요소 내부에 나타날 수 있으며 패딩을 설정하면 요소 내부에 여러 테두리를 위한 공간이 생겨 다루기가 더 쉬워집니다.

단점: CSS3 속성, 낮은 호환성

위 내용은 CSS3에서 다중 테두리를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!