CSS3의 box-shadow는 다중 테두리를 만드는 데 정말 강력합니다. 이 기사에서는 다중 테두리를 구현하는 CSS3 방법에 대한 자세한 설명의 초점이기도 합니다. 하지만 그 전에 더 나은 호환성을 갖춘 전통적인 방법을 살펴보겠습니다. 🎜>
방법 1: 여러 경계를 달성하기 위한 p 중첩.
렌더링:<p id="outer"> <p id="inner">p嵌套实现多重边框</p> </p>
#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; }*/
방법 2: 여러 테두리를 얻으려면 윤곽선+윤곽선 오프셋을 사용합니다.
두 개의 테두리 레이어만 그려야 한다면 외곽선을 사용할 수도 있습니다. 외곽선은 테두리 외부의 레이어로 테두리 원리와 동일합니다. 윤곽선 스타일을 설정하면 테두리 외부에 또 다른 테두리 레이어를 설정할 수 있습니다. 단, 내부 요소의 테두리 스타일이 변경되어도 개요 속성에 의해 설정된 테두리는 변경되지 않는다는 점에 유의하세요. 즉, 요소 테두리의 모서리가 둥근 경우 윤곽선으로 그린 가장 바깥쪽 테두리는 여전히 직사각형입니다. 이는 외곽선 그리기 테두리의 단점입니다.
렌더링:
<p id="outline">outlie实现多重边框</p>
#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 속성은 ","로 구분된 여러 그림자 목록을 전달할 수 있습니다. 따라서 섀도우 목록을 정의하고 확장 매개변수의 값을 점진적으로 늘리면 여러 테두리 효과를 그릴 수 있습니다.
렌더링:
<p id="boxShadow">boxshadow实现多重边框(外投影)</p>
#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; /*参数分别为:水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/ }
방법 4: 상자 그림자 내부 투영을 사용하여 여러 테두리를 만듭니다. (권장)
렌더링:<p id="moreboxShadow">boxshadow实现多重边框(内投影)</p>
/*使用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에서 다중 테두리를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!