成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS揭秘之《多重邊框》

sixgo / 1040人閱讀

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

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

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

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

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

4、需要注意的是box-shadow 是層層疊加的，也就是說如果你想讓第二層邊框?qū)挾葹?的話則必須在第一層邊框?qū)挾?0的基礎(chǔ)上增加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)邊框會響應(yīng)鼠標(biāo)點(diǎn)擊事件，投影出來的邊框雖然看上去占據(jù)空間大了很多，但是點(diǎn)擊區(qū)域范圍沒有變大(無法響應(yīng)點(diǎn)擊事件可通過因?yàn)樗粫绊懖季郑?而且也不會受到 box-sizing 屬性的影響)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85206.html

相關(guān)文章

  • CSS揭秘之《多重邊框》

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

    codeGoogle 評論0 收藏0

  • CSS揭秘之多重邊框

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

    liuyix 評論0 收藏0

  • 《CSS揭秘》-背景與邊框

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

    tangr206 評論0 收藏0

  • 《CSS揭秘》：平行四邊形

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

    yuxue 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<