學透CSS-box-shadow你真的會嗎?

​

創作不易 拒絕白嫖 點個贊呗

關注專欄 學透CSS ,帶你走進CSS的深處！！！

相容性

box-shadow 基本相容市面上的大部分浏覽器，是以不需要考慮相容性。

是什麼

box-shadow可以在元素上添加陰影，一個元素可以添加多個陰影。

文法

box-shadow:offset-x offset-y blur spread color position(可選)

offset-x

指定陰影的水準偏移量。即在x軸上陰影的位置。正值使陰影出現在元素的右邊，而負值使陰影出現在元素的左邊。

offset-y

指定陰影的垂直偏移量。即在y軸上陰影的位置。正值使陰影出現在元素的下邊，而負值使陰影出現在元素的上邊。

blur

指定陰影的模糊程度,值越大越模糊。

spred

指定陰影的延伸尺寸，值越大，增加的越多。

color

指定了陰影的顔色

position

指定陰影的位置，可以使用inset變成内部陰影

多重陰影

box-shadow 屬性能在單個元素上接受多個陰影。每個陰影通過用逗号分隔的 box-shadow 屬性清單來加載。

box-shadow: 20px 20px 20px 10px blue,
-20px -20px 20px 10px black;      

簡單示例

單邊陰影

首先正常效果的話是這樣子的

box-shadow: 0 8px 10px 0px black ;

會發現如果使用blur效果的話會出現三個方向的陰影

這種情況下我們其實是隻想要下面的那一個陰影的，

思路：第三參數和第四參數互相抵消，可以讓其他邊框效果隐藏。

圓形陰影

box-shadow: 20px 20px 20px 10px blue,
border-radius: 50%;      

層疊效果

利用單個元素接收多個陰影效果

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px,
     rgba(240, 46, 170, 0.3) 10px 10px, 
     rgba(240, 46, 170, 0.2) 15px 15px, 
     rgba(240, 46, 170, 0.1) 20px 20px, 
     rgba(240, 46, 170, 0.05) 25px 25px;