首頁 > web前端 > css教學 > box-shadow實現不同角度的投影

box-shadow實現不同角度的投影

高洛峰
發布: 2016-11-15 14:17:47
原創
1816 人瀏覽過

先看看看box-shadow的參數說明:

box-shadow實現不同角度的投影

為了實現不同角度的投影,需要藉助四個參數。核心原理是將模糊的距離加大,將陰影的尺寸減小

頂部投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 -5px 5px -5px;
登入後複製

box-shadow實現不同角度的投影

右側投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 5px 0 5px -5px;
登入後複製

box-shadow實現不同角度的投影

雙邊投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 5px 5px -5px;
登入後複製
box-shadow實現不同角度的投影

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板