一、多重邊框[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 之間的空隙。
代碼示例：
<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 倍是為了更好的計算
邊框內圓角
三、半透明邊框[3]
背景知識：rgba 或 hsla 顏色屬性，background-clip
思路：讓邊框呈現在 被裁剪背景的 padding-box 里
代碼示例：
<div class="border-opacity">
半透明邊框的實現
</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;
}
小結：
半透明邊框的實現需要借助css3的 background-clip 的屬性
background-clip有三個屬性：
1、border-box: 背景被裁剪到邊框盒（看不到邊框）
2、padding-box: 背景被裁剪到內邊距框（可以看見邊框）
3、content-box: 背景被裁剪到內容框（邊框緊貼著內容）
半透明邊框效果圖
四、連續的圖像邊框[4]
背景知識：css 漸變，基本的border-iamge，background-clip
先來看看 border-image 是如何來實現 圖像邊框的:
border-image 的實現原理是九宮格伸縮法：把圖片切割成九塊，然后把它們應用到元素邊框相應的邊和角。
代碼示例：
<p class="border-image">border-image 的實現原理是九宮格伸縮法：把圖片切割成九塊，然后把它們應用到元素邊框相應的邊和角。</p>
<p class="border-image">我們并不想讓圖片的某個特定部分固定在拐角處；而是希望出現在拐角處的圖片區域是隨著元素寬高金額邊框厚度的變化而變化的。</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 效果圖
缺點：我們并不想讓圖片的某個特定部分固定在拐角處；而是希望出現在拐角處的圖片區域是隨著元素寬高金額邊框厚度的變化而變化的。
如何解決呢？
實現思路：
1、利用 css 漸變和背景的擴展
2、在背景圖片上，在疊加一層純白的實色背景
3、為了讓下層的背景透過邊框區域顯示出來，需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設置背景色，需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實色背景的效果
代碼示例：
<p class="contituous-images">實現思路：
1、利用 css 漸變和背景的擴展
2、在背景圖片上，在疊加一層純白的實色背景
3、為了讓下層的背景透過邊框區域顯示出來，需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設置背景色，需要用一道從白色過渡到白色的 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;
}
連續的圖像邊框
還可以通過漸變圖案實現信封樣式的邊框
代碼示例
還可以通過 漸變圖案實現 信封樣式的 邊框
<p class="envelope-border">還可以通過 漸變圖案實現 信封樣式的 邊框</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;}
信封邊框效果圖
到此這篇關于css 中多種邊框的實現小竅門的文章就介紹到這了,更多相關css 邊框內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
