css怎么写出一个凹槽
时间: 2024-02-01 22:12:53 浏览: 30
可以使用CSS的box-shadow属性来模拟一个凹槽效果。具体实现方法如下:
1. 首先,需要给元素设置一个背景色和一个边框,这是为了让凹槽更加明显。
2. 然后,使用box-shadow属性来模拟凹槽的效果。需要设置两个不同的box-shadow值,一个是正常的box-shadow值,另一个是将偏移量和模糊半径设置为负值的box-shadow值。
下面是一个示例代码,可以参考一下:
```css
div {
background-color: #fff; /* 设置背景色 */
border: 1px solid #ccc; /* 设置边框 */
box-shadow: 0 0 0 2px #ccc, inset 0 0 10px -2px #ccc; /* 设置box-shadow */
width: 200px;
height: 100px;
}
```
解释一下上面代码的box-shadow属性:
- 第一个值是水平偏移量,第二个值是垂直偏移量,这里都是0,表示不偏移。
- 第三个值是模糊半径,这里设置为0,表示无模糊。
- 第四个值是扩展半径,这里设置为2px,表示将box-shadow扩展2px,使其和边框重叠,形成一个边框的效果。
- 接下来是inset关键字,表示内阴影。
- 然后是偏移量和模糊半径,这里都是负值,表示将内阴影向内缩小,形成凹槽的效果。
- 最后是内阴影的颜色,这里设置为#ccc。
效果如下图所示:
![凹槽效果](https://img-blog.csdnimg.cn/20210803153752467.png)