css只给盒子左右设置阴影
时间: 2023-10-18 09:02:33 浏览: 35
CSS 的 box-shadow 属性可以用来给盒子设置阴影,其中第一个值是水平方向的偏移量,第二个值是垂直方向的偏移量,第三个值是模糊程度,第四个值是阴影的尺寸。如果只需要左右两侧设置阴影,可以将第一个值设置为正值,第二个值设置为 0,例如:
```
box-shadow: 8px 0 6px -6px black, -8px 0 6px -6px black;
```
这样就会在盒子的左右两侧各生成一个 6 像素模糊、6 像素尺寸的黑色阴影。
相关问题
css如何给盒子设置阴影
可以使用box-shadow属性给盒子设置阴影。
语法如下:
```
box-shadow: h-shadow v-shadow blur spread color inset;
```
解释一下各个参数的含义:
- h-shadow:水平阴影的位置,可以是负值。
- v-shadow:垂直阴影的位置,可以是负值。
- blur:模糊距离,可选,值越大阴影越模糊。
- spread:阴影的扩展大小,可选。
- color:阴影的颜色。
- inset:可选,如果设置为inset,则阴影在盒子内部。
例如,给一个宽度为200px、高度为100px、红色背景的盒子设置一个水平位置为2px、垂直位置为2px、模糊距离为5px、阴影颜色为黑色的阴影效果可以这样实现:
```css
.shadow {
width: 200px;
height: 100px;
background-color: red;
box-shadow: 2px 2px 5px black;
}
```
css给一个盒子设置边框阴影
可以使用CSS的box-shadow属性来给一个盒子设置边框阴影。例如:
```css
.box {
box-shadow: 2px 2px 5px #888888;
}
```
上面的代码中,`.box`为要设置阴影的盒子的类名。`box-shadow`属性的参数含义分别为:水平偏移量、垂直偏移量、模糊半径、阴影颜色。在上面的例子中,阴影的水平偏移量为2px,垂直偏移量为2px,模糊半径为5px,阴影颜色为#888888。