box-shadow 方塊陰影

box-shadow 方塊陰影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影的顏色 內部陰影;

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。 測試
spread	可選。陰影的尺寸。 測試
color	可選。陰影的顏色。請參閱 CSS 顏色值。
inset	可選。將外部陰影 (outset) 改為內部陰影。

box-shadow: 20px 20px 5px 5px #888888

box-shadow: 20px -20px 10px 0px #888888;

box-shadow: 20px -20px 10px 0px #91e6fb inset;

border-radius: 150px;box-shadow: 5px 5px 60px 40px #ff9900

box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4), 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset, -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;

box-shadow: 5px 5px 3px 0px navajowhite,
10px 10px 3px 0px navajowhite,
15px 15px 3px 0px navajowhite,
20px 20px 3px 0px navajowhite,
25px 24px 3px 0px navajowhite;

#box-shadow 方塊陰影

圖片陰影 box-shadow

圖片陰影 box-shadow

box-shadow : x y blur spread color inset
     x : 依序表示水平位移距離                     y : 垂直位移距離
blur : 模糊強度                                     spread : 擴散強度
color : 陰影顏色                                       inset : 內陰影

<img style="box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.6); " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ako3lKloPNNpBSm2lXmAa6PEFKYsFt8tx2YRf9nwu-5QENOB9YkndE1-tWrsik_V9gYigF3FqcuuvZguAUrHXvnPbfq2pBzT5DQ5if0JEpibgNmDeShdxGQR-g8nn4b1BEZFKF0OFJSH/s1600/IMG-20170401-WA0007.jpg" width="200px" /> <img style="box-shadow: -15px -15px 10px 0px rgba(20%,20%,40%,0.6);float: right; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ako3lKloPNNpBSm2lXmAa6PEFKYsFt8tx2YRf9nwu-5QENOB9YkndE1-tWrsik_V9gYigF3FqcuuvZguAUrHXvnPbfq2pBzT5DQ5if0JEpibgNmDeShdxGQR-g8nn4b1BEZFKF0OFJSH/s1600/IMG-20170401-WA0007.jpg" width="200px" />

00

<div style="box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.3); background-color: #ffd382; float: left; height: 60px; text-align: center; width: 250px;">box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.3)</div> <div style="box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.6) inset ; background-color: #82ff82; float: right; height: 60px; text-align: center; width: 250px;">box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.6) inset</div> <br><br><br><br><br><br> <div style="box-shadow: -15px -15px 10px 0px rgba(20%,20%,40%,0.3); background-color: #ffd382; float: left; height: 60px; text-align: center; width: 250px;">box-shadow: -15px -15px 10px 0px rgba(20%,20%,40%,0.3)</div> <div style="box-shadow: -15px -15px 10px 0px rgba(20%,20%,40%,0.6) inset ; background-color: #82ff82; float: right; height: 60px; text-align: center; width: 250px;">box-shadow: -15px -15px 10px 0px rgba(20%,20%,40%,0.6) inset </div>

00

<div style="box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.3);border-radius: 150px; background-color: #ffd382; float: left; height: 60px; text-align: center; width: 250px;">box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.3)</div> <div style="box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4), 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset, -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ; border-radius: 150px; background-color: #ffd382; float: right; height: 100px; text-align: center; width: 400px;"> 10px 10px 5px 0px rgba(20%,20%,40%,0.4),<br> 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset,<br> -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;</div>

00