?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
<direction> = above | below | left | right
<offset> = <length> | <percentage>
<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默認(rèn)值:none
適用于:所有元素
繼承性:無
動(dòng)畫性:否
計(jì)算值:指定值
none:無倒影
above:指定倒影在對象的上邊
below:指定倒影在對象的下邊
left:指定倒影在對象的左邊
right:指定倒影在對象的右邊
<length>:用長度值來定義倒影與對象之間的間隔??梢詾樨?fù)值
<percentage>:用百分比來定義倒影與對象之間的間隔??梢詾樨?fù)值
none:無遮罩圖像
<url>:使用絕對或相對地址指定遮罩圖像。
<linear-gradient>:使用線性漸變創(chuàng)建遮罩圖像。
<radial-gradient>:使用徑向(放射性)漸變創(chuàng)建遮罩圖像。
<repeating-linear-gradient>:使用重復(fù)的線性漸變創(chuàng)建背遮罩像。
<repeating-radial-gradient>:使用重復(fù)的徑向(放射性)漸變創(chuàng)建遮罩圖像。
假設(shè)定義了 <mask-box-image>,<offset>必須指定,否則可以省略
對應(yīng)的腳本特性為boxReflect。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit-#1 | 18.0-42.0-webkit- |
需要注意的是4.0以前的安卓系統(tǒng)需要使用老式的漸變語法,詳見<gradient>下的各種漸變支持?jǐn)?shù)據(jù)。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-box-reflect_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> html,body{ margin:50px 0; } .reflect{ width:950px; margin:0 auto; -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); font:bold 100px/1.231 georgia,sans-serif; text-transform:uppercase; } </style> </head> <body> <div class="reflect">你看到倒影了么?</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例