box-shadow实现内部阴影
时间: 2023-10-17 17:12:52 浏览: 88
Shader实现的阴影效果(Shadow)
5星 · 资源好评率100%
要实现内部阴影效果,可以使用 `inset` 关键字将 `box-shadow` 应用于元素内部而不是外部。下面是一个示例:
```css
.box {
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
```
上述代码中的 `box-shadow` 属性值中的 `inset` 表示内部阴影,后面的参数分别是阴影的偏移量、模糊半径和颜色。你可以根据需要调整这些值来达到想要的效果。
阅读全文