欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么用css3的box-reflect設(shè)計倒影效果

這篇文章主要為大家展示了“怎么用css3的box-reflect設(shè)計倒影效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“怎么用css3的box-reflect設(shè)計倒影效果”這篇文章吧。

創(chuàng)新互聯(lián)公司服務(wù)項目包括井研網(wǎng)站建設(shè)、井研網(wǎng)站制作、井研網(wǎng)頁制作以及井研網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，井研網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到井研省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

說起倒影效果，在傳統(tǒng)網(wǎng)頁中，我們只能使用photoshop進行事先將倒影設(shè)計好，然后導入到網(wǎng)頁中，這樣不但耗費資源，也阻礙了開發(fā)的效率。而

css3新增了Reflections板塊，css  Reflections允許css設(shè)計倒影。 

目前， css  Reflections僅獲得webkit引擎的支持，我們只能夠在Chrome和Safari瀏覽器中測試，相信以后會普及的。

css3的box-reflect屬性，可以使我們進行圖片、文字等的倒影設(shè)計，具體語法：

語法：

box-reflect：包括3個值。

1. direction 定義方向，取值包括 above 、 below 、 left 、 right。

above：

指定倒影在對象的上邊

below：

指定倒影在對象的下邊

left：

指定倒影在對象的左邊

right：

指定倒影在對象的右邊

2. offset定義反射偏移的距離，取值包括數(shù)值或百分比，其中百分比根據(jù)對象的尺寸進行確定。默認為0。

用長度值來定義倒影與對象之間的間隔。可以為負值。用百分比來定義倒影與對象之間的間隔。可以為負值。

3. mask-box-image定義遮罩圖像，該圖像將覆蓋投影區(qū)域。如果省略該參數(shù)值，則默認為無遮罩圖像。

取值：

none：無遮罩圖像：

使用絕對或相對地址指定遮罩圖像。

使用線性漸變創(chuàng)建遮罩圖像。

使用徑向(放射性)漸變創(chuàng)建遮罩圖像。

使用重復的線性漸變創(chuàng)建背遮罩像。

使用重復的徑向(放射性)漸變創(chuàng)建遮罩圖像。

說明：

設(shè)置或檢索對象倒影。

對應(yīng)的腳本特性為boxReflect。

當對象源發(fā)生變化時，投影能夠自動更新，當鼠標經(jīng)過對象時，也能夠在投影中看到鼠標效果，如果該屬性應(yīng)用到video標簽上，視頻也會以投影效果進行播放。而且投影的規(guī)模和反射偏移不影響頁面的布局。

下面的示例定義一個簡單的倒影樣式，效果圖如下：

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>

我們在上面的基礎(chǔ)上繼續(xù)改進，為倒影設(shè)置距離，向下偏移10像素，效果圖如下：

改動的css代碼：

<style type="text/css">

img {

    height:250px;

    -webkit-box-reflect:below 10px ;

}

</style>

接下來繼續(xù)進行改進，設(shè)計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>

另外，除了圖片我們可以設(shè)計倒影外，網(wǎng)頁上的任何對象都可以設(shè)計css倒影效果，下面的示例是將文本設(shè)計為倒影效果：

完整代碼如下：

<!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 />

        結(jié)著愁怨的姑娘 </p>

</div>

<img src="images/bg2.jpg" />

</body>

</html>

以上是“怎么用css3的box-reflect設(shè)計倒影效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：怎么用css3的box-reflect設(shè)計倒影效果
文章網(wǎng)址：http://chinadenli.net/article40/ggjjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)