多重邊框的兩種實現方案：

border-shadow

outline

Mutiple border

.common {

width: 25vw;

height: 20vh;

margin: 10%;

background: gray;

}

.box-shadow {

box-shadow: 0 0 0 10px #655,

0 0 0 15px deeppink,

0px 2px 5px 15px hsla(240, 100%, 50%, .5);

}

.inner-box-shadow {

background: white;

box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1);

}

.outline {

border: 2px solid hsla(280, 100%, 50%, 1);

outline: 2px dashed hsla(0, 0%, 100%, 1);

outline-offset: -15px;

border-radius: 10px;

outline-width: 2px;

}

box-shadow

以由逗號分隔的列表來描述一個或多個陰影效果。該屬性可以讓幾乎所有元素的邊框產生陰影。如果元素同時設置了 border-radius ，陰影也會有圓角效果。多個陰影的z-ordering 和多個 text shadows 規則相同(第一個陰影在最上面)。

/* x偏移量 | y偏移量 | 陰影顏色 */

box-shadow:60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */

box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */

box-shadow: inset 5em 1em gold;

/* 任意數量的陰影，以逗號分隔 */

box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局關鍵字 */

box-shadow: inherit;

box-shadow: initial;

box-shadow: unset;

指定單個 box-shadow 的用法：

給出兩個、三個或四個數字值的情況。

如果只給出兩個值, 這兩個值將被瀏覽器解釋為x軸上的偏移量 和y軸上的偏移量 。

如果給出了第三個值, 這第三個值將被解釋為模糊半徑的大小 。

如果給出了第四個值, 這第四個值將被解釋為擴展半徑的大小 。

可選， 插頁(陰影向內) inset。

可選， 顏色值 。

聲明多個shadows時， 用逗號將shadows隔開。

outline

CSS的outline屬性是用來設置一個或多個單獨的輪廓屬性的簡寫屬性 ， 例如 outline-style, outline-width 和 outline-color。 多數情況下，簡寫屬性更加可取和便捷。

輪廓與邊框在以下幾個方面存在不同：

輪廓不占據空間，它們被描繪于內容之上；

輪廓可以是非矩形的。在Gecko/Firefox中，輪廓是矩形的，但是Opera則會圍繞元素結構繪制非矩形的形狀；

/* 寬度 | 樣式 | 顏色 */

outline: 1px solid white;

outline-offset ：用于設置 outline 與一個元素邊緣或邊框之間的間隙。

outline是元素的輪廓，懸浮在元素邊框之上。元素和其輪廓之間是透明的。也就是說，它們之間的顏色會繼承父元素的背景色。

/* values */

outline-offset: 3px;

outline-offset: 0.2em;

/* Global values */

outline-offset: inherit;

outline-offset: initial;

outline-offset: unset;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html多重边框，中间空白,CSS揭秘之多重边框的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。