亚洲av无码一区东京热,野花影视视频在线观看免费

主頁 > 知識庫 > css 中多種邊框的實(shí)現(xiàn)小竅門

css 中多種邊框的實(shí)現(xiàn)小竅門

一、多重邊框[1]

背景知識：box-shadow，outline
鑒于使用場景的多元化，多重邊框的設(shè)計越來越多，以往可以借助 border-image 屬性應(yīng)付一下，但是這個在css 代碼層面并不是很靈活?，F(xiàn)在我們借助 box-shadow 和 outline 兩個屬性來分別實(shí)現(xiàn)多重邊框。

1、box-shadow 方案

思路：利用 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)其他樣式的邊框

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、前提是實(shí)現(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 擴(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)圓角

三、半透明邊框[3]

背景知識：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)容）

半透明邊框效果圖

四、連續(xù)的圖像邊框[4]

背景知識：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)。