CSS(四)-- 从倒影说起,谈谈 CSS 继承 inherit

 

4、从倒影说起,谈谈 CSS 继承 inherit

给定一张有如下背景图的 div:

制作如下的倒影效果:

方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码。

 

法一:-webkit-box-reflect

这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡:

基本上是只有 -webkit- 内核的浏览器才支持。

不过使用起来真的是方便,解题如下:

div{
    -webkit-box-reflect: below;
}