全国服务热线:4008-888-888

技术知识

CSS 承继 inherit特性的方式

给定1张有以下情况图的 div:

制做以下的倒映实际效果:

方式许多,可是大家自然要找寻最快最方便快捷的方式,最少得是不管照片如何转变, div 尺寸如何转变,大家都无需去改大家的编码。

法1:-webkit-box-reflect

这是1个10分新的 CSS 特性,应用起来10分简易,能够从各个方位反射面大家內容。但是适配性过度萧条:

基础上是仅有 -webkit- 核心的访问器才适用。

但是应用起来真的是便捷,答题以下:

但是应用起来真的是便捷,答题以下:

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

box-reflect 有4个方位能够选, below | above | left | right 意味着下上上下,更实际的能够看看  MDN 。

法2:inherit,应用承继

本题关键還是以便详细介绍这类方式,适配性好。

inherit 是啥,每一个 CSS 特性界定的简述都指出了这个特性是默认设置承继的 ("Inherited: Yes") 還是默认设置不承继的 ("Inherited: no")。这决策了当你沒有为元素的特性特定值时该怎样测算值。

灵便应用 inherit 承继父值,能够处理很多看似繁杂的难题。针对本题,大家对照片器皿加上1个伪元素,应用  background-image:inherit 承继父值的情况图值,便可以保证不管照片怎样变,大家的 CSS 编码都不用修改:

div:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: ⑴00%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

总结

到此这篇有关CSS 承继 inherit特性的方式的文章内容就详细介绍到这了,更多有关CSS 承继 inherit內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服