对于mozilla和其他浏览器是否有与-webkit-box-reflect
类似的属性?我无法在google上找到哪些其他浏览器支持此功能。所以如果有人能告诉我或给我链接,那真是太好了。CSS属性框 - 反映兼容性?
5
A
回答
9
这是可能的不仅与webkit(最新的铬或Safari),但也在最新的Firefox。
这里是例子:http://codepen.io/jonathan/pen/pgioE
HTML:
<div id="someid">
<img src="image url" />
<div/>
CSS(WebKit的):
#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(火狐 - 壁虎):
#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使用专有供应商前缀进行反射。
我希望这有助于!
7
-webkit-box-reflect
属性仅受Webkit浏览器支持,即Chrome和Safari。由于它是一个专有的webkit属性,因此其他浏览器没有相应的功能。
另一种方法是使用javascript创建一个带有褪色不透明度的镜像元素。
相关问题
- 1. CSS选框兼容性
- 2. CSS Windows兼容性
- 3. CSS兼容性2
- 4. ie7 lang属性兼容性
- 5. 我框架mac兼容性问题?CSS
- 6. CSS边框图像兼容性错误
- 7. 框架兼容性
- 8. Swagger Codegen反向兼容性
- 9. WPF TabItem边框不反映BorderThickness属性
- 10. CSS浏览器兼容性
- 11. IE CSS不兼容性
- 12. PhoneGap的CSS兼容性
- 13. iframe和css兼容性
- 14. IE/jQuery/CSS的兼容性
- 15. 解决CSS兼容性
- 16. Internet Explorer 8 css兼容性
- 17. CSS IE兼容性问题
- 18. Safari CSS兼容性问题
- 19. 规则属性的兼容性
- 20. html5数据属性向后兼容性
- 21. 导航属性不反映
- 22. UIView反映CALayer属性
- 23. JavaScript框架IE6兼容性
- 24. .net框架兼容性
- 25. CSS内容属性
- 26. CSS边框属性
- 27. 用css反向线性渐变属性
- 28. 反序列化向后兼容性
- 29. GridLayout兼容性
- 30. PLSQL_V2_COMPATIBILITY兼容性