特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果。
我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性。
/* Hide only visually, but have it available for screenreaders*/ .visuallyhidden { border: 0 none !important; clip: rect(1px 1px 1px 1px);/*IE<8*/ clip: rect(1px,1px,1px,1px); height: 1px !important; margin: -1px; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px; }
如果你不知道也不用担心,接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章,你将对clip属性有一个很深的了解。
Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。
大家应该看过使用javascript的插件来剪切元素,但是你也可以使用CSS的clip属性实现,也许会有一些限制,但我们可以一起看看。
语法:
想要了解clip属性,我们很有必要先学习clip的语法知识:
.selector { clip: <shape> | auto | inherit }
首先你要注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。
说实话,我真的不知道为什么是这样的。至少,我在网络上没有发现任何有关于这方面的话题,因此,如果你要是知道为什么,希望您能在下面的评论中分享一些知识。
上面的语法告诉我们,clip属性只接受三个不同的属性值:
- <shape>:shape是一个函数功能,当使用仅使用rect()属性;
- auto:这是一个默认值,clip设置auto值和没有进行剪切是一样的效果;
- inherit:继承父元素的clip属性值。
很多时候,你可能希望有更多的shape函数功能使用,比如说rect()和circle()等,但是到目前为止仅有rect()函数可使用,不过不用担心,这个功能就可以帮我们制作很多很酷的效果。
Rect()使用
接下来我们来看rect()使用方法。rect()需要设置四个值:top, right, bo
如需转载,烦请注明出处:https://www.w3cplus.com/css3/clip.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!