CSS3 box-reflect 屬性
2018-10-24 11:28 更新
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-reflect_CSS3參考手冊</title>
<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>
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-reflect_CSS3參考手冊</title>
<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>語法
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>
默認值：none
取值
- none：
- 無倒影
<direction>
- above：
- 指定倒影在對象的上邊
- below：
- 指定倒影在對象的下邊
- left：
- 指定倒影在對象的左邊
- right：
- 指定倒影在對象的右邊
<offset>
- <length>：
- 用長度值來定義倒影與對象之間的間隔。可以為負值
- <percentage>：
- 用百分比來定義倒影與對象之間的間隔?？梢詾樨撝?/dd>
<mask-box-image>
- none：
- 無遮罩圖像
- <url>：
- 使用絕對或相對地址指定遮罩圖像。
- <linear-gradient>：
- 使用線性漸變創(chuàng)建遮罩圖像。
- <radial-gradient>：
- 使用徑向(放射性)漸變創(chuàng)建遮罩圖像。
- <repeating-linear-gradient>：
- 使用重復的線性漸變創(chuàng)建背遮罩像。
- <repeating-radial-gradient>：
- 使用重復的徑向(放射性)漸變創(chuàng)建遮罩圖像。
說明
設置或檢索對象倒影。瀏覽器支持
- 對應的腳本特性為boxReflect。
瀏覽器支持
以上內(nèi)容是否對您有幫助：
更多建議：