CSS+div建站是現(xiàn)在最為常見(jiàn)的一種建站方式，也是搜索引擎認(rèn)可的源碼站模式。而為了打造不同的頁(yè)面效果，在進(jìn)行CSS建站時(shí)候還有另一屬性，這就是筆者小丹今天為大家分享的主題——CSS box-shadow屬性。

    CSS box-shadow屬性可以用來(lái)給塊元素一個(gè)陰影或內(nèi)陰影，使用 border-image-* 屬性來(lái)構(gòu)造漂亮的可伸縮按鈕哦！下面就讓我們仔細(xì)看看這個(gè)CSS屬性。

    一般的語(yǔ)法 box-shadow屬性如下:

    box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

    即：css:(插圖) (橫向偏移量) (垂直偏移量) (模糊半徑) (傳播距離)(顏色);

    CSS box-shadow房地產(chǎn)有六個(gè)可能的屬性值:

    1、插圖

    2、橫向偏移量

    3、垂直偏移量

    4、模糊半徑

    5、傳播距離

    6、顏色

    只有兩個(gè)屬性值是必需的：水平偏移量和垂直偏移量。

    四個(gè)屬性值，橫向偏移，垂直偏移，模糊半徑和傳播距離，必須使用CSS長(zhǎng)度單位(例如px、em)。

    顏色值必須是一個(gè)CSS顏色單位如十六進(jìn)制值(例如# 000000)。

    屬性值的總結(jié)

    插圖

    如果 inset關(guān)鍵字屬性值存在，內(nèi)盒陰影將放置HTML元素。

    作為比較的參考，這是同一盒陰影沒(méi)有插圖的屬性：

    橫向偏移量

    水平偏移值控制x軸位置的影子，積極的價(jià)值將盒陰影，而消極的價(jià)值將它轉(zhuǎn)移到左邊。

    在接下來(lái)的例子中，水平偏移量設(shè)置為20 px，或雙垂直偏移量的值(設(shè)置為10 px)，所以影子是兩次廣泛的水平。

    垂直偏移量

    垂直偏移量控制盒陰影在y軸上的立場(chǎng)。積極的價(jià)值會(huì)向下移動(dòng)，而負(fù)面價(jià)值將起來(lái)。

    在接下來(lái)的例子中-20 px的垂直偏移量有一個(gè)長(zhǎng)度或雙水平偏移量(10 px)的長(zhǎng)度，所以影子的大小是垂直軸上的兩倍。也因?yàn)樵撝禐樨?fù)，陰影的位置抵消對(duì)盒子的頂部。

    模糊半徑

    模糊半徑屬性值影響模糊強(qiáng)度/盒陰影的清晰度。

    模糊半徑是可選的，如果你不指定它，它將默認(rèn)為0。此外，它不能有負(fù)面價(jià)值，與水平偏移量和垂直偏移量。

    如果模糊半徑為0，盒陰影將鋒利，它的顏色將固體。當(dāng)你增加價(jià)值，它將變得越加模糊，更加不透明。

    在下面的示例中模糊半徑值設(shè)置為20 px，因此模糊強(qiáng)度相當(dāng)明顯。

    傳播距離

    傳播距離使兩盒陰影更大或更小，如果它有一個(gè)積極的價(jià)值，盒陰影將變大。如果它有一個(gè)負(fù)面價(jià)值，將合同各方盒陰影。

    注意：因?yàn)榉e極的傳播距離(10 px)，有一個(gè)10 px陰影各方的盒子因?yàn)闆](méi)有水平偏移量和垂直偏移量：

    當(dāng)傳播距離為負(fù)時(shí)影子收縮。在接下來(lái)的例子中，影子小于框的寬度，因?yàn)槠湄?fù)面?zhèn)鞑ゾ嚯x和缺乏橫向偏移量：

    顏色

    你可以通過(guò)它的名字，已經(jīng)告訴顏色值集盒陰影的顏色。它可以使用任何CSS指定顏色，指定一個(gè)顏色值是可選的。

    默認(rèn)情況下，如果你不明確狀態(tài)盒陰影的顏色值——影子的顏色將等于HTML元素的顏色值嗎 box-shadow財(cái)產(chǎn)被應(yīng)用到。例如，如果你有一個(gè) div的顏色 red盒陰影的顏色也會(huì) red：

    如果你想要一個(gè)不同的陰影顏色，那么你需要指定的 box-shadow屬性值聲明。下面你可以看到，即使的前景顏色 div仍然是 red盒陰影顏色 blue。

    多個(gè)框陰影

    在這里你可以得到真正有創(chuàng)造性地使用這個(gè)CSS屬性：您可以應(yīng)用一個(gè)以上的盒陰影元素。

    語(yǔ)法如下:

    box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

    即：css:[盒陰影屬性1],[2]盒陰影屬性,[n]盒陰影屬性;

    換句話說(shuō)，你可以有多個(gè)框陰影在每個(gè)屬性值組之間用逗號(hào)(,)。

    在接下來(lái)的例子中有兩個(gè)框陰影：左上角一個(gè)紅色的盒子和一個(gè)藍(lán)色的右下方。

    (轉(zhuǎn)載請(qǐng)注明轉(zhuǎn)自：flw114.cn，謝謝!珍惜別人的勞動(dòng)成果，就是在尊重自己!）