使用CSS繼承inherit實現(xiàn)倒影的方法

不過使用起來真的是方便，解題如下：

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

-webkit- 內(nèi)核下查看Demo

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

法二：inherit，使用繼承

本題主要還是為了介紹這種方法，兼容性好。

inherit 是啥，每個 CSS 屬性定義的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 還是默認不繼承的 ("Inherited: no")。這決定了當你沒有為元素的屬性指定值時該如何計算值。

靈活使用 inherit 繼承父值，可以解決許多看似復雜的問題。對于本題，我們對圖片容器添加一個偽元素，使用 background-image:inherit 繼承父值的背景圖值，就可以做到無論圖片如何變，我們的 CSS 代碼都無需改動：

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

我們使用偽元素 background-image: inherit; 繼承父元素的背景圖，再使用 transform 旋轉(zhuǎn)容器達到反射的效果。

說到底，CSS 屬性的取值就是由默認值（initial），繼承（inherit）與加權(quán)系統(tǒng)構(gòu)成的（其實還有 unset(未設(shè)置)、revert(還原)），厘清它們的關(guān)系及使用方法對熟練使用 CSS 大有裨益。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com