參考： Box-Shadow Demonstration
最近對(duì)一些css很感興趣定续。樣式表的知識(shí)原理很容易被忽視浪腐，而且因?yàn)榭此坪?jiǎn)單脊岳，所以更容易忘記逝段。所以寫下來咯~ box-shadow 這個(gè)東東筛璧，看起來好像很簡(jiǎn)單，就是陰影嘛惹恃！但是到底怎么用夭谤？是個(gè)神馬規(guī)律？來來來巫糙，跟本猿一起學(xué)習(xí)一下朗儒。先看一個(gè)有意思的應(yīng)用~ 這個(gè)月亮里面的陰影，是用box-shadow畫的参淹，很神奇吧醉锄。
中間的一個(gè)圓，是靠下面兩件事畫的
- 絕對(duì)定位一個(gè)div (
.moon:after) - border-radius 和背景顏色設(shè)置
<style type="text/css">
.moon { position: relative; }
.moon:after {
content: '';
display: block;
position: absolute;
width: 50px;
height:50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
//其他的小圓(用box-shadow)...
}
</style>
而 其他所有的圓 都是靠 第一個(gè)圓的 box-shadow浙值，看代碼：
<style type="text/css">
.moon { position: relative; }
.moon:after {
//其他的小圓(用box-shadow)...
box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),
100px -60px 0 -7px rgba(0, 0, 0, 0.1),
-70px 40px 0 -14px rgba(0, 0, 0, 0.1),
-20px -50px 0 -15px rgba(0, 0, 0, 0.1),
-20px 120px 0 -15px rgba(0, 0, 0, 0.1),
50px 50px 0 -15px rgba(0, 0, 0, 0.1);
}
</style>
看出端倪了嘛恳不？它們6個(gè)圓是陰影沒錯(cuò)，但重點(diǎn)是它們是誰的陰影： 是第一個(gè)圓.moon:after的陰影开呐！
陰影是怎么一回事呢烟勋，陰影就是偏移的，和原元素(誰的陰影)同樣形狀同樣大小的一個(gè)東東筐付，因?yàn)?strong>偏移卵惦，所以超過了原元素的部分，造成了陰影效果瓦戚。那么box-shadow 后面的6句話沮尿，也就是對(duì)應(yīng)著6個(gè)陰影，在這個(gè)場(chǎng)景中的表現(xiàn)也就是较解，6個(gè)圓畜疾。我們分析一下語法哈~
box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),
前面兩個(gè)參數(shù)120px 80px 是相對(duì)于原元素的定位，如果這兩個(gè)參數(shù)是0px 0px那么剛好與原元素重合印衔，沒有偏移啡捶，也就沒有陰影效果了。第三個(gè)參數(shù)0 当编，就是模糊半徑為0届慈，也就是不模糊徒溪，這個(gè)值不能為負(fù)數(shù)忿偷。第四個(gè)參數(shù)是2px 就是 擴(kuò)展半徑，什么是擴(kuò)展半徑呢臊泌？就是如果這個(gè)值不設(shè)置的話鲤桥，會(huì)默認(rèn)為0，這時(shí)候渠概，陰影就和原元素一模一樣大茶凳，如果擴(kuò)展半徑為正數(shù)嫂拴，數(shù)字越大，陰影部分就越大贮喧，可以認(rèn)為是它相對(duì)于原元素多出來的大小程度筒狠。所以這個(gè)參數(shù)可以用來控制陰影圓的大小。最后一個(gè)參數(shù)顏色箱沦，這就不用講啦辩恼，就是陰影的顏色啦~！
