從倒影提及，談談 CSS 繼承 inherit

給定一張有以下背景圖的 div：

製做以下的倒影效果：

方法不少，可是咱們固然要尋找最快最便捷的方法，至少得是不管圖片怎麼變化，div 大小怎麼變化，咱們都不用去改咱們的代碼。

法一：-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);;
}
複製代碼