文章出處
文章列表
來自W3CSchool的解釋
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
example
1、 box-shadow:10px 10px black;
2、 box-shadow:10px -10px black;
3、 box-shadow:10px 0px black;
4、 box-shadow:0px 0px 10px 10px black;
Tip：右下陰影為正方向，前3個例子中，水平方向的陰影為10px，所以右側陰影一直有10px，而垂直方向陰影>0（正方向，下側有陰影），=0（垂直方向無陰影），<0（負方向，上側有陰影）。若垂直方向數值固定，水平方向變化也同理！
要想四邊都有陰影，水平垂直陰影大小設置為0，然后設置模糊距離和陰影尺寸！
水平陰影和垂直陰影是必須要的，不可缺少！
文章列表
全站熱搜
留言列表
