国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS揭秘之多重邊框

liuyix / 2742人閱讀

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

多重邊框的兩種實現方案：

border-shadow

outline





    
    
    
    Mutiple border
box-shadow

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

/* 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);

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

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

/* 全局關鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

指定單個 box-shadow 的用法：

給出兩個、三個或四個數字值的情況。

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

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

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

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

可選， 顏色值 。

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

outline

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

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

輪廓不占據空間，它們被描繪于內容之上；

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

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

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

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

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

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

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

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

相關文章

  • CSS揭秘之《多重邊框》

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

    sixgo 評論0 收藏0

  • CSS揭秘之《多重邊框》

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

    codeGoogle 評論0 收藏0

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

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

    tangr206 評論0 收藏0

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

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

    yuxue 評論0 收藏0

發表評論

0條評論

liuyix

男|高級講師

TA的文章

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