css3阴影解决方法 |设置手机页面css

CSS3阴影解决方法 CSS3阴影是一种很常用的效果，但在在不同浏览器中可能会出现一些问题。下面介绍几种解决方法。 解决方法一：box-shadow box-shadow是CSS3中专门用来添加阴影样式的属性，一般支持所有主流浏览器。 代码如下：

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

解决方法二：filter filter也是CSS3中添加阴影的属性之一，不过需要各种前缀以支持不同浏览器。 代码如下：

.shadow {
-webkit-filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}

解决方法三：伪元素 使用伪元素来添加阴影，这种方法比较早就有了，但需要额外的HTML标签，不太优雅。 代码如下：

.shadow::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
z-index: -1;
}

以上是几种常见的CSS3阴影解决方法，可以根据情况选择合适的方法来应用。