背景知識:box-shadow,outline
鑒于使用場景的多元化,多重邊框的設(shè)計越來越多,以往可以借助 border-image 屬性應(yīng)付一下,但是這個在css 代碼層面并不是很靈活?,F(xiàn)在我們借助 box-shadow 和 outline 兩個屬性來分別實(shí)現(xiàn)多重邊框。
思路:利用 box-shadow 的第四個參數(shù)(擴(kuò)張半徑)的大小,多重投影
代碼示例:
<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、缺點(diǎn):只能實(shí)現(xiàn)實(shí)線的邊框,不能實(shí)現(xiàn)其他樣式的邊框
代碼示例:
<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、前提是實(shí)現(xiàn)兩層邊框
2、可能需要 outline-offset 的屬性值
3、outline 的描邊默認(rèn)是矩形,當(dāng)有圓角時會認(rèn)為是 bug , 不能貼合圓角
4、不支持逗號語法
背景知識:box-shadow,outline
為了解決上面例子小結(jié)3中的bug,可以用box-shadow 擴(kuò)張半徑來填補(bǔ)掉 圓角與outline 之間的空隙。
代碼示例:
<div class="inner-rounding"> 需要借助 box-shadow、outline、“多重邊框”來實(shí)現(xiàn) 注意點(diǎn) : box-shadow 的擴(kuò)展半徑應(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; }
注意點(diǎn) : box-shadow 的擴(kuò)展半徑應(yīng)該是 圓角半徑的 0.5倍;嚴(yán)格來說應(yīng)該是(√2 - 1) 倍,這里取 0.5 倍是為了更好的計算
邊框內(nèi)圓角
背景知識:rgba 或 hsla 顏色屬性,background-clip
思路:讓邊框呈現(xiàn)在 被裁剪背景的 padding-box 里
代碼示例:
<div class="border-opacity"> 半透明邊框的實(shí)現(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é):
半透明邊框的實(shí)現(xiàn)需要借助css3的 background-clip 的屬性
background-clip有三個屬性:
1、border-box: 背景被裁剪到邊框盒(看不到邊框)
2、padding-box: 背景被裁剪到內(nèi)邊距框(可以看見邊框)
3、content-box: 背景被裁剪到內(nèi)容框(邊框緊貼著內(nèi)容)
半透明邊框效果圖
背景知識:css 漸變,基本的border-iamge,background-clip
先來看看 border-image 是如何來實(shí)現(xiàn) 圖像邊框的:
border-image 的實(shí)現(xiàn)原理是九宮格伸縮法:把圖片切割成九塊,然后把它們應(yīng)用到元素邊框相應(yīng)的邊和角。
代碼示例:
<p class="border-image">border-image 的實(shí)現(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 效果圖
缺點(diǎn):我們并不想讓圖片的某個特定部分固定在拐角處;而是希望出現(xiàn)在拐角處的圖片區(qū)域是隨著元素寬高金額邊框厚度的變化而變化的。
如何解決呢?
實(shí)現(xiàn)思路:
1、利用 css 漸變和背景的擴(kuò)展
2、在背景圖片上,在疊加一層純白的實(shí)色背景
3、為了讓下層的背景透過邊框區(qū)域顯示出來,需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設(shè)置背景色,需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實(shí)色背景的效果
代碼示例:
<p class="contituous-images">實(shí)現(xiàn)思路: 1、利用 css 漸變和背景的擴(kuò)展 2、在背景圖片上,在疊加一層純白的實(shí)色背景 3、為了讓下層的背景透過邊框區(qū)域顯示出來,需要給兩層背景指定不同的 background-clip 值 4、在多重背景的最底層設(shè)置背景色,需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實(shí)色背景的效果 </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ù)的圖像邊框
還可以通過漸變圖案實(shí)現(xiàn)信封樣式的邊框
代碼示例
還可以通過 漸變圖案實(shí)現(xiàn) 信封樣式的 邊框
<p class="envelope-border">還可以通過 漸變圖案實(shí)現(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 中多種邊框的實(shí)現(xiàn)小竅門的文章就介紹到這了,更多相關(guān)css 邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:延邊 泰州 大同 萍鄉(xiāng) 赤峰 林芝 保定
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《css 中多種邊框的實(shí)現(xiàn)小竅門》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。