css box-shadow 让左右阴影消失
时间: 2023-09-30 15:05:36 浏览: 184
要让 CSS 的 `box-shadow` 属性的左右阴影消失,可以通过设置 `box-shadow` 的 `inset` 属性为 `true`,并将水平方向的偏移量设置为 0 来实现。下面是一个示例代码:
```css
.box {
width: 200px;
height: 200px;
box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.5);
}
```
这个示例代码中,`inset` 属性设置为 `true`,表示内阴影;`0` 表示水平方向的偏移量为 0;`10px` 表示垂直方向的偏移量为 10px;`10px` 表示模糊半径为 10px;`-10px` 表示扩散半径为 -10px,即阴影向内收缩;`rgba(0,0,0,0.5)` 表示阴影颜色为黑色,透明度为 0.5。
这样设置后,阴影只会出现在元素的顶部和底部,左右两侧没有阴影。
阅读全文