你的位置:首页 > 软件开发 > 网页设计 > 谈谈一些有趣的CSS题目(四)

谈谈一些有趣的CSS题目(四)

发布时间:2016-09-26 11:00:09
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。不断更新,不断更新,不断更新,重要的事情 ...

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

所有题目汇总在我的 Github 。

 

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

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

谈谈一些有趣的CSS题目(四)

制作如下的倒影效果:

谈谈一些有趣的CSS题目(四)

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

 

法一:-webkit-box-reflect

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

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

谈谈一些有趣的CSS题目(四)

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

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

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:谈谈一些有趣的CSS题目(四)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。