開本系列，討論一些有趣的 CSS 題目，拋開實用性而言，一些題目為了拓寬一下解決問題的思路，此外，涉及一些容易忽視的 CSS 細節。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型
談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少
所有題目匯總在我的 Github 。
4、從倒影說起，談談 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);;
}
我們使用偽元素 background-image: inherit; 繼承父元素的背景圖，再使用 transform 旋轉容器達到反射的效果。
說到底，CSS 屬性的取值就是由默認值（initial），繼承（inherit）與加權系統構成的（其實還有
unset(未設置)、revert(還原)），厘清它們的關系及使用方法對熟練使用 CSS 大有裨益。
所有題目匯總在我的 Github ，發到博客希望得到更多的交流。
到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。