css 带距离的阴影

CSS中的阴影效果可以通过box-shadow属性实现。在使用box-shadow时，我们可以设置距离属性，来控制阴影与元素的距离。

.box-shadow {
    box-shadow: 10px 10px rgba(0,0,0,0.3);
}

上述代码中，box-shadow的第一个属性值为水平距离，第二个属性值为垂直距离。在这个例子中，阴影将向右下方偏移10px。

我们也可以设置多个阴影，以实现更多的效果。下面是一个例子，展示了多个阴影的效果：

.box-shadow {
    box-shadow: 0 0 10px rgba(0,0,0,0.1),0 0 20px rgba(0,0,0,0.2),0 0 30px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.4);
}
    

上述代码中，我们设置了四个阴影，每个阴影距离为0，也就是在原位置上。而每个阴影都比前一个阴影的距离更远，实现了阴影层次感的效果。

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