CSS 圖片映象
在本章中，您將學習如何映象一個影像。
CSS 圖片映象
box-reflect 屬性用於建立影像映象。
box-reflect 屬性的值可以是：below、above、left 或 right。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
後面帶有 -webkit- 的數字表示需要加字首才能使用的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | 不支援 | 4.0 -webkit- | 15.0 -webkit- |
示例
CSS 映象偏移
要指定影像與映象之間的間隙，請在 box-reflect 屬性中新增間隙大小。
CSS 帶有漸變的映象
我們還可以建立映象的漸隱效果。
示例
建立映象的漸隱效果
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
自己動手試一試 »
