gpt4 book ai didi

CSS属性框-反射(reflect)兼容性?

转载 作者:行者123 更新时间:2023-12-05 07:04:43 25 4
gpt4 key购买 nike

mozilla 和其他浏览器是否有类似-webkit-box-reflect 的属性?我无法在谷歌上找到哪些其他浏览器支持这个。因此,如果有人可以告诉我或给我链接,那就太好了。

最佳答案

这不仅可以使用 webkit(最新的 chrome 或 safari),也可以使用最新的 firefox。

示例如下: http://codepen.io/jonathan/pen/pgioE

HTML:

<div id="someid">
<img src="image url" />
<div/>

CSS(网络工具包):

#someid {
/* need some space for the reflection */
margin-bottom: 120px;
/* the gradient makes the reflection fade out */
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}

CSS(Firefox - Gecko):

#someid {
position: relative;
/* need some space for the reflection */
margin-bottom: 120px;
}

#someid:before {
content:""; /* needed or nothing will be shown */
background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat;
-moz-transform: scaleY(-1); /* flip the image vertically */
position:relative;
height:140px;
width: 360px; /* should be > image width + margin + shadow */
top: 247px;
left:0px;
}

Firefox 使用 -moz-element 进行反射 ( https://developer.mozilla.org/en-US/docs/CSS/element ),而 webkit 使用专有的供应商前缀进行反射。

希望对您有所帮助!

关于CSS属性框-反射(reflect)兼容性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62885000/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com