css的box-shadow
时间: 2023-10-02 20:06:48 浏览: 45
box-shadow是一种CSS属性,用于在元素周围创建一个阴影效果。它可以用于盒子、文本、图片等元素上。
box-shadow属性的语法如下:
```
box-shadow: h-shadow v-shadow blur spread color inset;
```
其中,每个值的具体含义如下:
- h-shadow:水平阴影的位置,可正可负,表示向右或向左偏移阴影。例:10px表示阴影向右偏移10像素,-5px表示阴影向左偏移5像素。
- v-shadow:垂直阴影的位置,可正可负,表示向下或向上偏移阴影。例:5px表示阴影向下偏移5像素,-3px表示阴影向上偏移3像素。
- blur:模糊距离,可选值是一个长度值。例:3px表示阴影的模糊效果为3像素。
- spread:阴影的尺寸扩展或收缩值,可选值是一个长度值。例:2px表示阴影扩展或收缩2像素。
- color:阴影的颜色,可以使用具体的颜色值或者关键字。例:"#000"表示黑色阴影。
- inset:可选值,如果存在,则阴影在边框内部(内阴影),否则在边框外部(外阴影)。
例如,要创建一个具有5像素水平偏移、3像素垂直偏移、10像素模糊、0扩展和黑色颜色的外阴影,可以使用以下代码:
```css
box-shadow: 5px 3px 10px 0 #000;
```
你还可以使用逗号分隔多个阴影来创建叠加效果。例如,要创建两个不同颜色的阴影,可以使用以下代码:
```css
box-shadow: 3px 3px 5px #000, -3px -3px 5px #fff;
```
希望这能帮到你!如果你有更多问题,请继续提问。