box-shadow怎么用
时间: 2023-08-21 21:17:53 浏览: 124
box-shadow的使用方法
box-shadow是CSS中用来添加阴影效果的属性。它可以用来为一个元素添加阴影效果,具体用法如下:
```css
box-shadow: h-shadow v-shadow blur spread color inset;
```
其中各个值的含义如下:
- h-shadow:必选,表示水平阴影的位置。可以是正数(向右偏移)或负数(向左偏移)。
- v-shadow:必选,表示垂直阴影的位置。可以是正数(向下偏移)或负数(向上偏移)。
- blur:可选,表示阴影的模糊半径。默认值为0,表示没有模糊效果。
- spread:可选,表示阴影的尺寸。正数表示扩大阴影尺寸,负数表示缩小阴影尺寸。默认值为0,表示阴影尺寸与元素尺寸一致。
- color:可选,表示阴影的颜色。默认值为当前文本颜色。
- inset:可选,表示阴影是否为内阴影。如果指定了该值,则为内阴影,否则为外阴影。
例如,要为一个元素添加一个向右下方偏移10px的黑色阴影,可以这样写:
```css
box-shadow: 10px 10px 0px 0px #000000;
```
如果要添加一个内阴影,则可以在最后添加inset关键字:
```css
box-shadow: inset 10px 10px 0px 0px #000000;
```
需要注意的是,box-shadow是CSS3中新增的属性,不同浏览器的支持程度可能会有所不同,需要在使用时进行兼容性处理。
阅读全文