溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“怎么用css3的box-reflect設計倒影效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“怎么用css3的box-reflect設計倒影效果”這篇文章吧。
說起倒影效果，在傳統網頁中，我們只能使用photoshop進行事先將倒影設計好，然后導入到網頁中，這樣不但耗費資源，也阻礙了開發的效率。而
css3新增了Reflections板塊，css Reflections允許css設計倒影。
目前， css Reflections僅獲得webkit引擎的支持，我們只能夠在Chrome和Safari瀏覽器中測試，相信以后會普及的。
css3的box-reflect屬性，可以使我們進行圖片、文字等的倒影設計，具體語法：
語法：
box-reflect：包括3個值。
1. direction 定義方向，取值包括 above 、 below 、 left 、 right。
above：
指定倒影在對象的上邊
below：
指定倒影在對象的下邊
left：
指定倒影在對象的左邊
right：
指定倒影在對象的右邊
2. offset定義反射偏移的距離，取值包括數值或百分比，其中百分比根據對象的尺寸進行確定。默認為0。
用長度值來定義倒影與對象之間的間隔。可以為負值。用百分比來定義倒影與對象之間的間隔。可以為負值。
3. mask-box-image定義遮罩圖像，該圖像將覆蓋投影區域。如果省略該參數值，則默認為無遮罩圖像。
取值：
none：無遮罩圖像：
使用絕對或相對地址指定遮罩圖像。
使用線性漸變創建遮罩圖像。
使用徑向(放射性)漸變創建遮罩圖像。
使用重復的線性漸變創建背遮罩像。
使用重復的徑向(放射性)漸變創建遮罩圖像。
說明：
設置或檢索對象倒影。
對應的腳本特性為boxReflect。
當對象源發生變化時，投影能夠自動更新，當鼠標經過對象時，也能夠在投影中看到鼠標效果，如果該屬性應用到video標簽上，視頻也會以投影效果進行播放。而且投影的規模和反射偏移不影響頁面的布局。
下面的示例定義一個簡單的倒影樣式，效果圖如下：
css代碼如下：
<style type="text/css">
img {
height:250px;
border:1px solid red;
-webkit-box-reflect:below;
}
</style>
html代碼如下：
<body>
<img src="images/bg1.jpg" />
</body>
我們在上面的基礎上繼續改進，為倒影設置距離，向下偏移10像素，效果圖如下：
改動的css代碼：
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 10px ;
}
</style>
接下來繼續進行改進，設計css漸變倒影，通過漸變遮罩逐漸蓋住下面的倒影，制作出漸隱效果。
css代碼如下：
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
另外，除了圖片我們可以設計倒影外，網頁上的任何對象都可以設計css倒影效果，下面的示例是將文本設計為倒影效果：
完整代碼如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Reflections文字倒影效果</title>
<style type="text/css">
img {
height: 200px;
position: absolute;
right: 0;
bottom: 0;
}
div {
border: 1px solid #666;
color: #666;
-webkit-box-reflect: below 5px;
}
h2 { text-align: center; }
</style>
</head>
<body>
<div>
<h2>《雨巷》--- 戴望舒</h2>
<p>撐著油紙傘，獨自<br />
彷徨在悠長、悠長<br />
又寂寥的雨巷<br />
我希望逢著<br />
一個丁香一樣地<br />
結著愁怨的姑娘 </p>
</div>
<img src="images/bg2.jpg" />
</body>
</html>
以上是“怎么用css3的box-reflect設計倒影效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
