inherit继承

2021-10-27  本文已影响0人  xinhui9056

inherit 可以用在任何 CSS 属性中,而且它总是绑定到父元素的计算值(对伪元素来说,则会取生成该伪元素的宿主元素)。

html结构
<div class="callout">
        这个 inherit 关键字对于背景色同样非常有用。举个例子,在创建提
示框的时候,你可能希望它的小箭头能够自动继承背景和边框的样式
</div>


CSS
.callout {
    position: relative;
    padding: 10px
    width: 300px;
    margin: 30px auto;
    background: #eeeeee;
    border: 1px solid #ddd;
}
    
.callout::before {
    content: "";
    position: absolute;
    top: -.4em;
    left: 1em;
    padding: .35em;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
 }
最终效果
上一篇 下一篇

猜你喜欢

热点阅读