css 中多種邊框的實現方法

這篇文章主要介紹“css 中多種邊框的實現方法”，在日常操作中，相信很多人在css 中多種邊框的實現方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css 中多種邊框的實現方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、多重邊框[1]

背景知識：box-shadow，outline
鑒于使用場景的多元化，多重邊框的設計越來越多，以往可以借助 border-image 屬性應付一下，但是這個在css 代碼層面并不是很靈活。現在我們借助 box-shadow 和 outline 兩個屬性來分別實現多重邊框。
1、box-shadow 方案
思路：利用 box-shadow 的第四個參數（擴張半徑）的大小，多重投影
代碼示例：

    <div class="border-multiple">
        多重邊框實現方案一：box-shadow
    </div>

    .border-multiple {
        margin: 50px auto;
        padding: 20px;
        width: 600px; 
        background-color: #fff; 
        box-shadow: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    }

多重邊框--box-shadow

小結：

1、陰影并不影響布局，也不會受到box-sizing的影響
2、支持逗號分隔語法，可以創建任意數量的投影
3、缺點：只能實現實線的邊框，不能實現其他樣式的邊框

2、outline 方案
代碼示例：

    <div class="border-outline">
        多重邊框實現方案二：outline
    </div>
    .border-outline {
        margin: 200px auto;
        padding: 20px;
        width: 600px;
        background-color: #ff0;
        outline: 3px dashed #0f0;
        outline-offset: -10px;
    }

多重邊框--outline

小結:

1、前提是實現兩層邊框
2、可能需要 outline-offset 的屬性值
3、outline 的描邊默認是矩形，當有圓角時會認為是 bug , 不能貼合圓角
4、不支持逗號語法

二、邊框內圓角[2]

背景知識：box-shadow，outline
為了解決上面例子小結3中的bug，可以用box-shadow 擴張半徑來填補掉 圓角與outline 之間的空隙。http://www.changhai120.com/
代碼示例：

    <div class="inner-rounding">
         需要借助 box-shadow、outline、“多重邊框”來實現 
         注意點 ： box-shadow 的擴展半徑應該是 圓角半徑的 0.5倍
    </div> 
    .inner-rounding {
        background-color: #ccc;
        margin: 50px auto;
        padding: 20px;
        width: 600px; 
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 0 0 10px #f00;
        outline: 10px solid #f00;
    }

注意點 ： box-shadow 的擴展半徑應該是 圓角半徑的 0.5倍；嚴格來說應該是(√2 - 1) 倍，這里取 0.5 倍是為了更好的計算

到此，關于“css 中多種邊框的實現方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！