一、多重邊框[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、不支持逗號語法

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以添加我的web前端交流裙【600610151】即可免費獲取。

二、邊框內(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)信封樣式的邊框
代碼示例：

<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;}

信封邊框效果圖

---

多重邊框 ?

邊框內(nèi)圓角 ?

半透明邊框 ?

連續(xù)的圖像邊框 ?

作者：貴在隨心
鏈接：https://www.jianshu.com/p/273e77cb99c6

總結(jié)

以上是生活随笔為你收集整理的css 透明背景_css 中多种边框的实现小窍门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。