一、多重邊框[1]
背景知識：box-shadow，outline
鑒于使用場景的多元化，多重邊框的設(shè)計越來越多，以往可以借助 border-image 屬性應(yīng)付一下，但是這個在css 代碼層面并不是很靈活。現(xiàn)在我們借助 box-shadow 和 outline 兩個屬性來分別實現(xiàn)多重邊框。
1、box-shadow 方案
思路：利用 box-shadow 的第四個參數(shù)（擴張半徑）的大小，多重投影
代碼示例：
<div class="border-multiple">
多重邊框?qū)崿F(xiàn)方案一：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
小結(jié)：
1、陰影并不影響布局，也不會受到box-sizing的影響
2、支持逗號分隔語法，可以創(chuàng)建任意數(shù)量的投影
3、缺點：只能實現(xiàn)實線的邊框，不能實現(xiàn)其他樣式的邊框
2、outline 方案
代碼示例：
<div class="border-outline">
多重邊框?qū)崿F(xiàn)方案二：outline
</div>
.border-outline {
margin: 200px auto;
padding: 20px;
width: 600px;
background-color: #ff0;
outline: 3px dashed #0f0;
outline-offset: -10px;
}
多重邊框–outline
小結(jié):
1、前提是實現(xiàn)兩層邊框
2、可能需要 outline-offset 的屬性值
3、outline 的描邊默認(rèn)是矩形，當(dāng)有圓角時會認(rèn)為是 bug , 不能貼合圓角
4、不支持逗號語法
二、邊框內(nèi)圓角[2]
背景知識：box-shadow，outline
為了解決上面例子小結(jié)3中的bug，可以用box-shadow 擴張半徑來填補掉 圓角與outline 之間的空隙。
代碼示例：
<div class="inner-rounding">
需要借助 box-shadow、outline、“多重邊框”來實現(xiàn)
注意點 ： box-shadow 的擴展半徑應(yīng)該是 圓角半徑的 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 的擴展半徑應(yīng)該是 圓角半徑的 0.5倍；嚴(yán)格來說應(yīng)該是(√2 - 1) 倍，這里取 0.5 倍是為了更好的計算
邊框內(nèi)圓角
三、半透明邊框[3]
背景知識：rgba 或 hsla 顏色屬性，background-clip
思路：讓邊框呈現(xiàn)在 被裁剪背景的 padding-box 里
代碼示例：
<div class="border-opacity">
半透明邊框的實現(xiàn)
</div>
.border-opacity {
margin: 50px auto;
padding: 20px;
width: 600px;
border: 10px solid hsla(0, 0%, 100%, 0.5);
background-color: #fff;
background-clip: padding-box;
}
小結(jié)：
半透明邊框的實現(xiàn)需要借助css3的 background-clip 的屬性
background-clip有三個屬性：
1、border-box: 背景被裁剪到邊框盒（看不到邊框）
2、padding-box: 背景被裁剪到內(nèi)邊距框（可以看見邊框）
3、content-box: 背景被裁剪到內(nèi)容框（邊框緊貼著內(nèi)容）
半透明邊框效果圖
四、連續(xù)的圖像邊框[4]
背景知識：css 漸變，基本的border-iamge，background-clip
先來看看 border-image 是如何來實現(xiàn) 圖像邊框的:
border-image 的實現(xiàn)原理是九宮格伸縮法：把圖片切割成九塊，然后把它們應(yīng)用到元素邊框相應(yīng)的邊和角。
代碼示例：
<p class="border-image">border-image 的實現(xiàn)原理是九宮格伸縮法：把圖片切割成九塊，然后把它們應(yīng)用到元素邊框相應(yīng)的邊和角。</p>
<p class="border-image">我們并不想讓圖片的某個特定部分固定在拐角處；而是希望出現(xiàn)在拐角處的圖片區(qū)域是隨著元素寬高金額邊框厚度的變化而變化的。</p>
.border-image {
border: 40px solid transparent;
border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
padding: 1em;
max-width: 20em;
font: 130%/1.6 Baskerville, Palatino, serif;
}
.border-image:nth-child(2) {
margin-top: 1em;
border-image-repeat: round;
}
border-image 效果圖
缺點：我們并不想讓圖片的某個特定部分固定在拐角處；而是希望出現(xiàn)在拐角處的圖片區(qū)域是隨著元素寬高金額邊框厚度的變化而變化的。
如何解決呢？
實現(xiàn)思路：
1、利用 css 漸變和背景的擴展
2、在背景圖片上，在疊加一層純白的實色背景
3、為了讓下層的背景透過邊框區(qū)域顯示出來，需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設(shè)置背景色，需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實色背景的效果
代碼示例：
<p class="contituous-images">實現(xiàn)思路：
1、利用 css 漸變和背景的擴展
2、在背景圖片上，在疊加一層純白的實色背景
3、為了讓下層的背景透過邊框區(qū)域顯示出來，需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設(shè)置背景色，需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實色背景的效果
</p>
.contituous-images {
padding: 1em;
border: 1em solid transparent;
/* background: linear-gradient(white, white),
url(http://csssecrets.io/images/stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box; */
/* background 還可簡寫如下 */
background: linear-gradient(white, white) padding-box,
url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;
width: 21em;
padding: 1em;
overflow: hidden;
/* 邊框可拖拽 */
resize: both;
font: 100%/1.6 Baskerville, Palatino, serif;
}
連續(xù)的圖像邊框
還可以通過漸變圖案實現(xiàn)信封樣式的邊框
代碼示例
還可以通過 漸變圖案實現(xiàn) 信封樣式的 邊框
<p class="envelope-border">還可以通過 漸變圖案實現(xiàn) 信封樣式的 邊框</p>
.envelope-border {
padding: 1em;
border: 0.5em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;}
信封邊框效果圖
到此這篇關(guān)于css 中多種邊框的實現(xiàn)小竅門的文章就介紹到這了,更多相關(guān)css 邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
