重慶分公司
重慶分公司
如何使用CSS3的box-reflect來制作倒影效果
這篇文章給大家分享的是有關(guān)如何使用CSS3的box-reflect來制作倒影效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、文昌ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的文昌網(wǎng)站制作公司
兼容性
既然是CSS3的屬性，我們當(dāng)然要來看看兼容性：點(diǎn)擊查看
接下來，我們來了解box-reflect如何使用？
語法如下：
-webkit-box-reflect：none | ? ?
box-reflect:none | ? ?
屬性說明：
none：此值為默認(rèn)值，表示無倒影；
direction：生成倒影的方向
above：指定倒影在對(duì)象的上邊 below：指定倒影在對(duì)象的下邊 left：指定倒影在對(duì)象的左邊 right：指定倒影在對(duì)象的右邊
offset：圖片與倒影間隔
length：用長(zhǎng)度值來定義倒影與對(duì)象之間的間隔?？梢詾樨?fù)值 percentage：用百分比來定義倒影與對(duì)象之間的間隔?？梢詾樨?fù)值
mask-box-image：用來設(shè)置倒影的遮罩效果；
值可以是：
none：無遮罩圖像 url：使用絕對(duì)或相對(duì)地址指定遮罩圖像。 linear-gradient：使用線性漸變創(chuàng)建遮罩圖像。 radial-gradient：使用徑向(放射性)漸變創(chuàng)建遮罩圖像。 repeating-linear-gradient：使用重復(fù)的線性漸變創(chuàng)建背遮罩像。 repeating-radial-gradient：使用重復(fù)的徑向(放射性)漸變創(chuàng)建遮罩圖像。
光是紙上談兵可不行，我們還是要通過實(shí)例來看看效果。
倒影的方向
在這個(gè)例子中，我弄了三個(gè)img：
css如下：
.box1,.box2,.box3{
width:120px;
float:left;
margin-right:180px;
}
img{
width:100%;
}
.box1 img{
-webkit-box-reflect:right;
box-reflect:right;
}
.box2 img,.box3 img{
-webkit-box-reflect: above;
box-reflect:above;
}
.box3{
padding-top:200px;
}效果圖如下：
在這里有一個(gè)疑問，box2和box3中的圖片都設(shè)置了box-reflect:above，都是在頂部生成投影，為什么box2看不到效果呢？原因就是我給box3設(shè)置了padding-top:200px，而box2沒有，初步估計(jì)是因?yàn)闆]有空間讓其顯示生成的倒影。
倒影與對(duì)象之間的距離
了解了生成倒影的方向后，我們來看第二個(gè)屬性，還是看例子：
依舊用三張圖片，不過樣式改變一下：
.box1 img{
-webkit-box-reflect:below 30px;
box-reflect:below 30px;
}
.box2 img{
-webkit-box-reflect:below -30px;
box-reflect:below -30px;
}
.box3 img{
-webkit-box-reflect:below 5%;
box-reflect:below 5%;
}效果圖如下：
接下來我們學(xué)習(xí)最后一個(gè)屬性。
遮罩效果
（1）使用漸變給倒影添加遮罩效果
.box1 img{
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
}效果如下：
使用背景圖給倒影添加遮罩效果
首先我們需要一張五角星的png圖片：
.box2 img{
-webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);
box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);
}效果如下：
感謝各位的閱讀！關(guān)于“如何使用CSS3的box-reflect來制作倒影效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
本文題目：如何使用CSS3的box-reflect來制作倒影效果
轉(zhuǎn)載源于：http://weahome.cn/article/picojg.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
