怎么在CSS中继承inherit属性

这篇文章给大家介绍怎么在CSS中继承inherit属性，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

专注于为中小企业提供成都做网站、成都网站设计、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业呼伦贝尔免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

法一：-webkit-box-reflect

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

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

不过使用起来真的是方便，解题如下：

不过使用起来真的是方便，解题如下：

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

box-reflect 有四个方向可以选， below | above | left | right 代表下上左右，更具体的可以看看  MDN 。

法二：inherit，使用继承

本题主要还是为了介绍这种方法，兼容性好。

inherit 是啥，每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

灵活使用 inherit 继承父值，可以解决许多看似复杂的问题。对于本题，我们对图片容器添加一个伪元素，使用  background-image:inherit 继承父值的背景图值，就可以做到无论图片如何变，我们的 CSS 代码都无需改动：

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

关于怎么在CSS中继承inherit属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。