“box-shadow”屬性(轉)
“box-shadow”屬性
box-shadow屬性是一個CSS3屬性，允許我們在幾乎任何元素上來創建陰影效果，類似於在設計軟件中的”drop shadow”。這些陰影效果允許我們在原本平面的、二維的頁面上面創建出深度（第三維）的錯覺。
語法
box-shadow屬性接收一個由5個部分組成的值
| 1 2 | box-shadow: offset-x offset-y blur spread color position; |
不像 border 等屬性值可以拆分成子屬性，box-shadow 屬性是獨立的。這意味著記錄下屬性值的順序更加重要，特別是長度值。
offset-x
第一個長度值指定了陰影的水平偏移量。即在x軸上陰影的位置。正值使陰影出現在元素的右邊，而負值使陰影出現在元素的左邊。
JavaScript| 1 2 3 4 | .left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) } |
offset-y
第二個長度值指定了陰影的垂直偏移量。即在y軸上陰影的位置。正值使陰影出現在元素的上邊，而負值使陰影出現在元素的下邊。
JavaScript| 1 2 3 4 | .left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) } |
blur
第三個長度值代表陰影的模糊半徑，舉例說明，就像你在設計軟件中使用高斯模糊濾鏡。0值意味著陰影是完全實心和尖銳的，沒有任何模糊。模糊數值越大，尖銳度越小，陰影越朦朧和模糊。負值是不被允許的，並會被處理成0。
| 1 2 3 4 5 6 |
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) } |
spread
第四個，同時也是最後一個長度值代表著陰影的尺寸。這個值可以被想象成從元素到陰影的距離。正值會在元素的各個方向按指定的數值延伸陰影。負值會使陰影收縮得比元素本身尺寸還小。默認值0會讓陰影伸展得和元素的大小一樣。
| 1 2 3 4 5 6 | .left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) } .right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) } |
color
顏色值，正如你期望的，是陰影的顏色。它可以是任何顏色單位。（參考 Working with Colour in CSS）
JavaScript| 1 2 3 4 | .left { box-shadow: 0px 0px 20px 10px #67b3dd } .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) } |
position
box-shadow屬性的最後一個值是一個可選的關鍵字，它代表著陰影的位置。默認情況下，這個值並而沒有給出，這意味著陰影是一個外部陰影。我們能通過關鍵字inset使陰影變成內部陰影。
| 1 2 3 4 | .left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset } .right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) } |
多重陰影
box-shadow 屬性能在單個元素上接受多個陰影。每個陰影通過用逗號分隔的 box-shadow 屬性列表來加載。
| 1 2 3 4 5 | .foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */ 20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */ } |
圓形陰影
box-shadow 屬性的邊界半徑是通過該元素的 border-radius 屬性來控制的。
| 1 2 3 4 5 | .foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5); border-radius: 50%; } |
把它們放在一起
把所有的部分放在一起，我們能通過使用box-shadow屬性創造出一些奇妙的效果。
一種非布局模塊邊界的替代品
我們可以使用box-shadow屬性來創建一種元素，這種元素是邊界環繞的，但是它不幹擾盒子模型或者頁面上面的其他布局。更有甚者，用它來創造出多個陰影，我們可以在元素不同的邊上擁有不同樣式的邊界。
| 1 2 3 4 5 6 7 8 9 10 | .simple { box-shadow: 0px 0px 0px 40px indianred; } .multiple { box-shadow: 20px 20px 0px 20px lightcoral, -20px -20px 0px 20px mediumvioletred, 0px 0px 0px 40px rgb(200,200,200); } |
彈出效果
在box-shadow（和transform）屬性上進行變形，我們能創造出一個元素靠近或者遠離使用者的假象。
| 1 2 3 4 5 6 7 8 9 10 11 | .popup { transform: scale(1); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; } .popup:hover { transform: scale(1.3); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; } |
浮動效果
我們能在:after這樣的偽元素上增加box-shadow的效果。我們能使用這個來創建出元素底部的陰影，給予元素浮起或者掉落下來的假象。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .floating { position: relative; transform: translateY(0); transition: transform 1s; } .floating:after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s; } /* Hover States */ .floating:hover { transform: translateY(-40px); transition: transform 1s; } .floating:hover:after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s; } |
我們能通過box-shadow屬性達成許多其他的特效。舉個例子，this popular pen 使用這個屬性創造出8種類似紙張的效果。即使表面上看起來它是一個用於創建簡單陰影的工具，實際上它可遠比那個功能強大的多。
“box-shadow”屬性(轉)