144
由Google搜索頁引發對box-shadow的使用和技巧總結
CSS3的box-shadow有點類似於text-shadow，隻不過不同的是text-shadow是對象的文本設置陰影，而box-shadow是給對象實現圖層陰影效果。
text-shadow demo：
語法:
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模煳的距離。 |
| color | 可選。陰影的顏色。參閱 CSS 顏色值。 |
1、
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
|
1
2
3
4
5
6
7
|
|
box-shadow demo：
語法:
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模煳距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
1、
-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;
2、向 div 元素添加 box-shadow：
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
test
3、
box-shadow:5px 5px 5px #999 inset;
4、
box-shadow:-5px -5px 5px #999 inset;
最後更新：2017-09-25 16:04:40