一張圖讓你快速掌握CSS3倒影

例圖片

在CSS3之前，想要實現示例圖片這樣的一個倒影效果一般只能通過處理圖片的方式，而CSS3問世之后，想要實現這樣的效果變得非常簡單，只需一個CSS3屬性就可以輕松實現了。

這就是今天所要提到的box-reflect屬性。

咱們先看看W3C給出的box-reflect語法：

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

box-reflect可給兩種屬性值，一種是none，為默認值，也就是沒有任何倒影效果，另一種才是我們今天所要講的，它可以同時賦予三個屬性值，它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像，其中后兩個屬性值可以缺省，但如果<mask-box-image>存在，則<offset>必填。

說了那么多干巴巴的解釋，還是聯系一下示例應該更好理解些吧。

我們現在來一步步地實現文章開頭示例圖片的投影效果：

①只給一個屬性值below。

<!--HTML代碼-->< img class="img" src="imgs/cat.jpg" />

/*CSS代碼*/.img{ -webkit-box-reflect: below; box-reflect: below;}

實現效果：

②再加個5px的間距。

/*CSS代碼*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

實現效果：

③最后加個圖片遮罩吧。

/*CSS代碼*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

這里的圖片遮罩沒有用圖片，而是用了CSS3中的linear-gradient屬性值，它就是用于線性漸變，具體用法這里就不提了，可以直接看這里（http://www.w3cplus.com/content/css3-gradient )，寫得很詳細。

實現效果：

這就是文章開頭示例圖片的最終效果。

接下來，再說說徑向漸變創建圖片遮罩和直接使用圖片遮罩。

徑向漸變的話其實跟線性漸變類似，只需要你掌握CSS3中基本的徑向漸變方法，給個簡單示例吧：

/*CSS代碼*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

實現效果：

效果很棒！好像貓咪真的在照鏡子一樣~~

那如果直接使用圖片遮罩呢？比如說我用這樣一張圖片作為遮罩：

/*CSS代碼*/.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

實現效果：

mask.png

可以看出，遮罩圖片會完全拉伸填充倒影圖片，并且效果是完全透明部分不會顯示出來（其實CSS3漸變圖片遮罩原理也跟這個是一樣的）。

需要注意的是，以上講的所有效果不僅僅可以用在圖片上，用在其他元素上也是完全可以的，比如說文字。

兼容性： box-reflect雖然看起來效果很不錯，但是遺憾的是，目前只有webkit內核瀏覽器兼容，不過移動端基本已經沒有任何問題啦~~

內容轉自微信公眾號：前端微站

、相關知識點

介紹

文檔

MDN關于倒影屬性介紹：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

官方說明：

非標準:該特性是非標準的，不在標準軌道上。不要在面向Web的生產站點上使用它:它并不適用于每個用戶。實現之間也可能存在很大的不兼容性，將來行為可能會發生變化

瀏覽器兼容性：

總結

雖然這是個非標準屬性，但是大多數瀏覽器都支持，火狐除外，追求效果的還是可以使用的。

屬性相關

支持三個位置的屬性值：
-webkit-box-reflect：屬性值1 屬性值2 屬性值3；

屬性值1：倒影的位置：

-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */

屬性值2：倒影的距離：

-webkit-box-reflect: below 10px;  /* 下，距離10像素 */

屬性值3：倒影的遮罩層：

-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距離0像素，線性遮罩最后白色 */

二、實現步驟

完整代碼：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { margin: 0; }
			#time {
				width: 300px;
				height: 80px;
				line-height: 80px;
				font-size: 48px;
				text-align: center;
				font-weight: bold; /* 下 */
				color: #fff;
				background-color: #2196f3;
				-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
			}
		</style>
	</head>
	<body>
		<div id="time"></div>
		<script>
			function refreshTime(){
				let time=document.getElementById('time');

				let h=new Date().getHours(); //小時
				let m=new Date().getMinutes(); //分鐘
				let s=new Date().getSeconds(); //秒

				time.innerHTML=`${h}:${m}:${s}`
				setTimeout(refreshTime, 1000)
			}

			refreshTime()
		</script>
	</body>
</html>

總結

以上就是今天要講的內容，本文介紹CSS倒影屬性，更多詳細內容，自己多寫寫代碼，多練練，可以參考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。

如果覺得有用歡迎點贊，關注
有問題私信我！！

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

離2019年春節越來越近了，該努力的都的努力一把了。是學生的，好好努力一把，希望您學業有成；是老板的，好好努力一把，祝您公司早日上市；是單身的，好好努力一把，早日找個好老婆。下面言歸正傳：

會PS的應該都知道如何制作倒影： 1、crtl+j復制圖層 2、選中新圖層，垂直180旋轉，然后拉到一個圖層底部對應 3、對復制圖層設置漸變色

今天我們就用CSS3制作圖片倒影，原理和PS一樣，下面我們一步一步來。

基礎結構 - 第一步

<div class="img1 alt=""></div>
<div class="img2 alt=""></div>
...
*{
 padding: 0;
 margin: 0;
}
div{
 display: block;
 width: 500px;
 height: 281px;
 background: url('./600-31080.png');
}

CSS3實現美美噠的圖片倒影效果

旋轉圖片 - 第二步

添加樣式，transform 旋轉

.img2{
 transform: scaleY(-1);
}

CSS3實現美美噠的圖片倒影效果

漸變 - 第三步

設置漸變，不能直接在img2上面添加樣式了，必須用另外一個層來蓋在上面，所以我們就用偽元素來處理這個效果

.img2:before{
 content: '';
 display: block;
 width: 100%;
 height: 100%;
 transform: scaleY(-1);
 background-image: -webkit-gradient(
 linear, 
 left bottom, 
 left top, 
 color-stop(0.2, rgb(255,255,255)), 
 color-stop(1, rgba(255,255,255,0.3))
 ); 
}

CSS3實現美美噠的圖片倒影效果

拓展

倒影和原圖增加立體感，我們可以使倒影圖傾斜一個角度，css3中，提供transform: skew(30deg)), 30deg是角度。由于傾斜，所以需要向右位移一下margin-left。

.img2{
 transform: scaleY(-1) skew(-30deg);
 margin-left: 81px;
}

CSS3實現美美噠的圖片倒影效果

總結

是不是發現，實現上面和PC一致，不過一個是用代碼實現的，一個只需要點擊操作就OK，原理一樣。主要通過transform的scale、skew屬性，和背景gradient漸變實現圖片倒影漸變效果。

有興趣的可以研究《通過transform scale制作一個正方體效果》哦，行動后才知道自己的能力，不要懼怕，而邁不開第一步，相信自己可以。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址請點擊下方“了解更多”

在線咨詢

上一篇：波哥教你仿58同城網站實現城市自動切換
下一篇：JavaScript瀏覽器端數據存儲方案之Cooki

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一張圖讓你快速掌握CSS3倒影

屬性相關

二、實現步驟

總結

前言

基礎結構 - 第一步

旋轉圖片 - 第二步

漸變 - 第三步

拓展

總結

推薦文章

公告

您的項目需求