圖片陰影 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/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/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/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/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