CSS揭秘之《多重邊框》

codeGoogle 發布于2019-08-29 13:20 / 2613人閱讀

摘要：還接受第四個參數稱作擴張半徑，通過指定正值或負值，可以讓投影面積加大或者減小如果我們想要一道實線邊框其實也是可以通過來模擬，原理就是一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值其實也能實現上述實線效果而且似乎挺簡單，但是卻

1、box-shadow還接受第四個參數（稱作“擴張半徑”），通過指定正值或負值，可以讓投影面積加大或者減小
2、如果我們想要一道實線邊框其實也是可以通過box-shadow來模擬，原理就是一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值
eg:

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

3、border其實也能實現上述實線效果而且似乎挺簡單，但是box-shadow卻是有border無法媲美的功能，它支持逗號分隔語法，我們可以創建任意數量的投影
eg:

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

4、需要注意的是box-shadow 是層層疊加的，也就是說如果你想讓第二層邊框寬度為5的話則必須在第一層邊框寬度10的基礎上增加5，也就是最終值為15

div {
            width: 100px;
            height: 60px;
            margin: 25px;
            background: yellowgreen;
            box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .6);
        }

具體效果可見鏈接
5、投影效果跟邊框的效果完全不一致，

a)投影它不會影響布局， 而且也不會受到 box-sizing 屬性的影響
b)邊框會響應鼠標點擊事件，投影出來的邊框雖然看上去占據空間大了很多，但是點擊區域范圍沒有變大(無法響應點擊事件可通過因為它不會影響布局， 而且也不會受到 box-sizing 屬性的影響)

6、如果我們要模擬虛線邊框的話，box-shadow 就沒轍了，雖然outline并不支持逗號分隔，但是可實現虛擬邊框，還可以通過 outline-offset 屬性來控制它跟元素邊緣之間的間距，這個屬性甚至可以接受負值
需要注意的是：邊框不一定會貼合 border-radius 屬性產生的圓角，因此如果元素
是圓角的，它的描邊可能還是直角的

        div {
            background: yellowgreen;
            border: 10px solid #655;
            outline: 5px solid deeppink;
            outline-offset: 5px;
        }

GPU云服務器云服務器大揭秘揭秘云存儲云計算揭秘人工智能揭秘

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112533.html

CSS揭秘之《多重邊框》

摘要：還接受第四個參數稱作擴張半徑，通過指定正值或負值，可以讓投影面積加大或者減小如果我們想要一道實線邊框其實也是可以通過來模擬，原理就是一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值其實也能實現上述實線效果而且似乎挺簡單，但是卻 1、box-shadow還接受第四個參數（稱作擴張半徑），通過指定正值或負值，可以讓投影面積加大或者減小2、如果我們想要一道實線邊框其實也是可以通過b...

sixgo 2019-08-20 19:08 評論0 收藏0
CSS揭秘之多重邊框

摘要：多重邊框的兩種實現方案以由逗號分隔的列表來描述一個或多個陰影效果。輪廓與邊框在以下幾個方面存在不同輪廓不占據空間，它們被描繪于內容之上輪廓可以是非矩形的。是元素的輪廓，懸浮在元素邊框之上。也就是說，它們之間的顏色會繼承父元素的背景色。多重邊框的兩種實現方案： border-shadow outline Mutiple border ...

liuyix 2019-08-30 11:08 評論0 收藏0
《CSS揭秘》-背景與邊框

摘要：給一個容器設置一層白色背景和一道半透明白色邊框。思路實際是設置的背景會延伸到邊框所在的區域的下層，可以通過屬性調整背景的默認行為。優點邊框樣式十分靈活。缺點只適用于雙層邊框的場景邊框不一定會貼合屬性產生的圓角。 1.給一個容器設置一層白色背景和一道半透明白色邊框。思路：實際是設置的背景會延伸到邊框所在的區域的下層，可以通過background-clip屬性調整背景的默認行為。 bac...

tangr206 2019-08-30 15:55 評論0 收藏0
《CSS揭秘》：平行四邊形

摘要：在視覺設計中，平行四邊形往往可以傳達出一種動感。問題使用來創建平行四邊形。將所有樣式應用到偽元素上，然后對偽元素進行變形。為了使偽元素保持良好的靈活性，可以自動繼承主元素的屬性。在視覺設計中，平行四邊形往往可以傳達出一種動感。問題使用CSS來創建平行四邊形。可以使用transform: skewX(-45deg) showImg(https://segmentfault.com/...

yuxue 2019-08-29 11:19 評論0 收藏0