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

    CSS box-shadow屬性可以用來給塊元素一個陰影或內陰影，使用 border-image-* 屬性來構造漂亮的可伸縮按鈕哦！下面就讓我們仔細看看這個CSS屬性。

    一般的語法 box-shadow屬性如下:

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

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

    CSS box-shadow房地產有六個可能的屬性值:

    1、插圖

    2、橫向偏移量

    3、垂直偏移量

    4、模糊半徑

    5、傳播距離

    6、顏色

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

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

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

    屬性值的總結

    插圖

    如果 inset關鍵字屬性值存在，內盒陰影將放置HTML元素。

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

    橫向偏移量

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

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

    垂直偏移量

    垂直偏移量控制盒陰影在y軸上的立場。積極的價值會向下移動，而負面價值將起來。

    在接下來的例子中-20 px的垂直偏移量有一個長度或雙水平偏移量(10 px)的長度，所以影子的大小是垂直軸上的兩倍。也因為該值為負，陰影的位置抵消對盒子的頂部。

    模糊半徑

    模糊半徑屬性值影響模糊強度/盒陰影的清晰度。

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

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

    在下面的示例中模糊半徑值設置為20 px，因此模糊強度相當明顯。

    傳播距離

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

    注意：因為積極的傳播距離(10 px)，有一個10 px陰影各方的盒子因為沒有水平偏移量和垂直偏移量：

    當傳播距離為負時影子收縮。在接下來的例子中，影子小于框的寬度，因為其負面?zhèn)鞑ゾ嚯x和缺乏橫向偏移量：

    顏色

    你可以通過它的名字，已經告訴顏色值集盒陰影的顏色。它可以使用任何CSS指定顏色，指定一個顏色值是可選的。

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

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

    多個框陰影

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

    語法如下:

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

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

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

    在接下來的例子中有兩個框陰影：左上角一個紅色的盒子和一個藍色的右下方。

    (轉載請注明轉自：www.theclubhubb.com，謝謝!珍惜別人的勞動成果，就是在尊重自己!）