那个css属性可以代替 -webkit-box-reflect: below 1px linear-gradient (transparent,#0004);
时间: 2024-10-02 07:01:09 浏览: 40
通过一张图教会你CSS3倒影的实现
CSS 的 `-webkit-box-reflect` 属性主要用于在元素下方创建一种类似于反射的效果,它已被现代浏览器弃用,尤其是 Safari 和 Chrome。为了达到类似的效果,你可以使用 CSS3 的 `background-image` 和 `mask-image` 或者 `::backdrop-filter` 来实现。这里是一个等效的替换方案:
```css
/* 使用 background-image 和 gradient */
background-image: linear-gradient(to bottom, transparent, #0004);
background-repeat: no-repeat;
background-position: center;
/* 或者使用 mask-image */
.mask {
-webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 4, .5));
mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 4, .5));
}
/* 如果支持 ::backdrop-filter */
.backdrop-filter-example {
backdrop-filter: drop-shadow(0 1px rgba(0, 0, 4, 0.5));
}
```
这些方法可以在现代浏览器中提供类似反射效果,并且更易维护。
阅读全文