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

資訊專欄INFORMATION COLUMN

CSS揭秘之多重邊框

liuyix / 2747人閱讀

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

多重邊框的兩種實現(xiàn)方案：

border-shadow

outline





    
    
    
    Mutiple border
box-shadow

以由逗號分隔的列表來描述一個或多個陰影效果。該屬性可以讓幾乎所有元素的邊框產(chǎn)生陰影。如果元素同時設(shè)置了 border-radius ，陰影也會有圓角效果。多個陰影的z-ordering 和多個 text shadows 規(guī)則相同(第一個陰影在最上面)。

/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow:60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內(nèi)) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;

/* 任意數(shù)量的陰影，以逗號分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局關(guān)鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

指定單個 box-shadow 的用法：

給出兩個、三個或四個數(shù)字值的情況。

如果只給出兩個值, 這兩個值將被瀏覽器解釋為x軸上的偏移量 和y軸上的偏移量 。

如果給出了第三個值, 這第三個值將被解釋為模糊半徑的大小 。

如果給出了第四個值, 這第四個值將被解釋為擴展半徑的大小 。

可選， 插頁(陰影向內(nèi)) inset。

可選， 顏色值 。

聲明多個shadows時， 用逗號將shadows隔開。

outline

CSS的outline屬性是用來設(shè)置一個或多個多帶帶的輪廓屬性的簡寫屬性 ， 例如 outline-style, outline-width 和 outline-color。 多數(shù)情況下，簡寫屬性更加可取和便捷。

輪廓與邊框在以下幾個方面存在不同：

輪廓不占據(jù)空間，它們被描繪于內(nèi)容之上；

輪廓可以是非矩形的。在Gecko/Firefox中，輪廓是矩形的，但是Opera則會圍繞元素結(jié)構(gòu)繪制非矩形的形狀；

/* 寬度 | 樣式 | 顏色 */
outline: 1px solid white;

outline-offset ：用于設(shè)置 outline 與一個元素邊緣或邊框之間的間隙。

outline是元素的輪廓，懸浮在元素邊框之上。元素和其輪廓之間是透明的。也就是說，它們之間的顏色會繼承父元素的背景色。

/*  values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

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

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

相關(guān)文章

  • CSS揭秘之《多重邊框》

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

    sixgo 評論0 收藏0

  • CSS揭秘之《多重邊框》

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

    codeGoogle 評論0 收藏0

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

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

    tangr206 評論0 收藏0

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

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

    yuxue 評論0 收藏0

發(fā)表評論

0條評論

liuyix

男|高級講師

TA的文章

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