CSS3中怎么實現多重邊框，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

超過十余年行業經驗，技術領先，服務至上的經營模式，全靠網絡和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業務范圍包括了：網站設計制作、網站制作，成都網站推廣，成都網站優化，整體網絡托管，成都微信小程序，微信開發，成都app開發，同時也可以讓客戶的網站和網絡營銷和我們一樣獲得訂單和生意！

方法1：div嵌套實現多重邊框。

效果圖：

html代碼

XML/HTML Code復制內容到剪貼板

1. <div id="outer">  

2.     <div id="inner">div嵌套實現多重邊框</div>  

3. </div>  

css代碼

CSS Code復制內容到剪貼板

1. #outer {   

2.     width: 100px;   

3.     height: 100px;   

4.     background-color: bisque;   

5.     border: 10px solid brown;   

6.     position: relative;   

7. }   

8.     

9. #inner {   

10.     width: 84px;   

11.     height: 84px;   

12.     border: 8px solid blue;   

13. }   

14. /*#outer, 

15. #inner { 

16.     -webkit-border-radius: 5px; 

17.     -moz-border-radius: 5px; 

18.     border-radius: 5px; 

19. }*/  

缺點：可能無法修改結構或修改html結構成本高；多個div都設置圓角時，邊框之間不能完全貼合。圓角多邊框效果圖：

方法2：使用outline+outline-offset實現多重邊框。
如果我們只需要繪制兩層邊框，使用outline也可以做到。outline是border外面的一層，和border原理一樣。通過設定outline的樣式可以為border外面再設定一層邊框。
但是需要注意的是，outline屬性設定的邊框不會隨著內部元素邊界樣式的變化而變化。也就是說，如果元素邊框帶了圓角，那么outline繪制出的最外層邊框仍然是矩形的。這是outline繪制邊框的一個缺憾。
效果圖：

html代碼

XML/HTML Code復制內容到剪貼板

1. <div id="outline">outlie實現多重邊框</div>  

css代碼

CSS Code復制內容到剪貼板

1. #outline {   

2.     width: 84px;   

3.     height: 84px;   

4.     border: 8px solid blue;   

5.     /*-webkit-border-radius: 5px; 

6.     -moz-border-radius: 5px; 

7.     border-radius: 5px;*/  

8.     outline: 10px solid brown;   

9.     outline-offset: 0px;   

10.     /*border和outline之間的距離*/  

11.     margin: 20px;   

12.     /*因為outline不影響布局，使用margin給邊框騰位置*/  

13. }  

優點：它跟邊框類似，可以設置各種線型，比如虛線、實線。

缺點：outline不影響布局，需使用margin給邊框騰位置。以防被其它元素覆蓋。如果容器本身有圓角的話，描邊并不能完全貼合圓角，效果圖如下：

方法3：使用box-shadow 外投影實現多重邊框。
box-shadow屬性可以為盒模型設定投影。但是其實它還有設定邊框的功能。
box-shadow可以傳遞五個參數，前兩個參數表示投影的偏移量，第三個參數表示投影的模糊程度，第四個參數表示投影的擴張度，最后一個參數表示投影的顏色。然而我們平常很少用到第四個參數，在這里使用第四個參數，就可以讓投影進行擴張，通過設定比較合適的值，就可以模擬出邊框的效果了。
同樣，box-shadow屬性可以傳入多個陰影的列表，用“,”分割即可。因此，只要我們定義一個陰影列表，并且遞增的增加其擴張度參數的取值，就可以繪制出多重邊框的效果了。
效果圖：

html代碼

XML/HTML Code復制內容到剪貼板

1. <div id="boxShadow">boxshadow實現多重邊框(外投影)</div>  

css代碼

CSS Code復制內容到剪貼板

1. #boxShadow {   

2.     margin: 40px;   

3.     /*因為box-shadow不影響布局，使用margin給邊框騰出位置*/  

4.     width: 84px;   

5.     height: 84px;   

6.     border: 8px solid blue;   

7.     -webkit-border-radius: 5px;   

8.     -moz-border-radius: 5px;   

9.     border-radius: 5px;   

10.     -webkit-box-shadow: 0 0 0 10px brown;   

11.     box-shadow: 0 0 0 10px brown;   

12.     /*參數分別為：水平偏移量、垂直偏移量、模糊距離、向外擴展距離和投影顏色*/  

13. }  

優點：多個圓角邊框之間完全貼合；同時還可以接收一個列表，一次設置多個投影（即邊框）。它的擴張效果是根據元素自己的形狀來的，如果元素是矩形，它擴張開來就是一個更大的矩形；如果元素有圓角，它也會擴張出圓角。

缺點：CSS3屬性，兼容性不好；box-shadow也不影響布局的，如果這個元素和其它元素的相對位置關系很重要，需要以外邊距等方式來為這些多出來的 “邊框” 騰出位置，以防被其它元素覆蓋。

注意：使用內嵌投影（即box-shadow添加參數為inset，默認不設置時為外陰影）似乎是更好的選擇。因為內嵌投影讓投影出現在元素內部，設置內邊距在元素的內部給多個邊框騰位置，處理起來更容易一些。

方法4：使用box-shadow 內投影實現多重邊框。(推薦使用)

效果圖：

html代碼

XML/HTML Code復制內容到剪貼板

1. <div id="moreboxShadow">boxshadow實現多重邊框(內投影)</div>  

css代碼

CSS Code復制內容到剪貼板

1. /*使用box-shadow一次性設置多個邊框，并且使用內嵌投影*/  

2. #moreboxShadow {   

3.     width: 120px;   

4.     height: 120px;   

5.     border: 8px solid blue;   

6.     /*注意：向外擴張的距離要每次累加；內嵌投影即添加參數為inset,該參數可選，當不設置時即為外投影*/  

7.     -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   

8.     box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   

9.     padding: 30px;   

10.     /*設置內邊距，為box-shadow添加的添加的邊框疼位置，這樣就不會影響元素之間的位置*/  

11. }  

優點：內嵌投影讓投影出現在元素內部，設置內邊距在元素的內部給多個邊框騰位置，處理起來更容易一些。

缺點：CSS3屬性，兼容性不好

看完上述內容，你們掌握CSS3中怎么實現多重邊框的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

文章標題：CSS3中怎么實現多重邊框
轉載源于：http://vcdvsql.cn/article34/gjiese.html

成都網站建設公司_創新互聯，為您提供網站改版、App開發、品牌網站設計、網站建設、虛擬主機、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯