談談一些有趣的CSS題目（四）-- 從倒影提及，談談 CSS 繼承 inherit

開本系列，討論一些有趣的 CSS 題目，拋開實用性而言，一些題目爲了拓寬一下解決問題的思路，此外，涉及一些容易忽視的 CSS 細節。

解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少

全部題目彙總在個人 Github 。

 

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

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

製做以下的倒影效果：

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

 

法一：-webkit-box-reflect

這是一個十分新的 CSS 屬性，使用起來十分簡單，能夠從各個方向反射咱們內容。不過兼容性過於慘淡：

基本上是隻有 -webkit- 內核的瀏覽器才支持。

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

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

-webkit- 內核下查看Demo

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);;
}

Demo戳我

 

咱們使用僞元素 background-image: inherit; 繼承父元素的背景圖，再使用 transform 旋轉容器達到反射的效果。

說到底，CSS 屬性的取值就是由默認值（initial），繼承（inherit）與加權系統構成的（其實還有 unset(未設置)、revert(還原)），釐清它們的關係及使用方法對熟練使用 CSS 大有裨益。

 

全部題目彙總在個人 Github ，發到博客但願獲得更多的交流。

到此本文結束，若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。