解題不考慮相容性,題目天馬行空,想到什麼說什麼,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補習一下吧。
不斷更新,不斷更新,不斷更新,重要的事情說三遍。
4、從倒影說起,談談 CSS 繼承 inherit
給定一張有如下背景圖的 p:
製作如下的倒影效果:
方法很多,但是我們當然要尋找最快最便捷的方法,至少得是無論圖片怎麼變化,p
大小怎麼變化,我們都不用去改我們的代碼。
法一:-webkit-box-reflect
這是一個十分新的 CSS 屬性,使用起來十分簡單,可以從各個方向反射我們內容。不過相容性過於慘淡:
基本上是只有 -webkit- 核心的瀏覽器才支援。
不過使用起來真的是方便,解題如下:
p{ -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 代碼都無需改動:
p: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 大有裨益。