亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS揭秘之多重邊框

liuyix / 2801人閱讀

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

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

border-shadow

outline





    
    
    
    Mutiple border
box-shadow

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

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

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

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

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

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

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

指定單個(gè) box-shadow 的用法：

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

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

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

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

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

可選， 顏色值 。

聲明多個(gè)shadows時(shí)， 用逗號(hào)將shadows隔開。

outline

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114793.html

相關(guān)文章

  • CSS揭秘之《多重邊框》

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

    sixgo 評(píng)論0 收藏0

  • CSS揭秘之《多重邊框》

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

    codeGoogle 評(píng)論0 收藏0

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

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

    tangr206 評(píng)論0 收藏0

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

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

    yuxue 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

liuyix

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<