css3 边框凹进去

CSS3中有一种边框效果，可以使边框看起来像是凹进去的。这个效果是通过box-shadow属性实现的。

下面是一个简单的示例代码：

.box {
    width: 200px;
    height: 200px;
    border: 2px solid #999;
    box-shadow: inset 0 0 10px #ccc;
}
    

可以看到，我们给一个名为.box的元素设定了宽度、高度和边框。但是，这个元素并没有看起来像是凹进去的效果。这是因为我们还没有使用box-shadow属性。

box-shadow属性需要指定几个值，这些值将控制阴影的大小、位置、模糊度和颜色。在这个例子中，我们使用了inset关键字来指定阴影是内向的，也就是凹进去的。然后我们使用0来设定阴影的水平和垂直位置，这意味着阴影将紧贴着元素的边缘。接下来，我们使用10px来指定阴影的模糊度，这意味着阴影的边缘将被模糊化。最后，我们使用#ccc来指定阴影的颜色。

现在我们已经给元素添加了凹进去的边框。尝试使用不同的值来改变阴影的大小、位置、模糊度和颜色，以便得到您想要的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！