CSS3實現圖形曲線陰形和翹邊陰影

• 2019 年 12 月 21 日
• 筆記

說明

本文首發於前端Q公眾號，時間為2016年03月12日，由於當時沒標原創，現重發一下標註原創…

正文

首先，來看看完成之後的效果圖：

①曲線陰影實現：

多個陰影重疊，就是正常陰影+曲線陰影

正常情況下，有個矩形有正常的陰影，作為主投影，這時候再定義一個有一定弧度圓角的圓角矩形，然後放在正常矩形的下面，並露出一點點底部有弧度的陰影，這樣的話就可以形成曲線投影的效果。例如下面這個樣子：

主要代碼：

html部分：

<div class="effect">  </div>    /*css部分：*/    /*曲線陰影*/  .effect{  	position: relative;  	width:500px;  	height:200px;  	margin: 0 auto;  	background-color: #ffffff;  	box-shadow:0 1px 10px rgba(0,120,215,0.7);  	-webkit-box-shadow:0 1px 10px rgba(0,120,215,0.7);  	-moz-box-shadow:0 1px 10px rgba(0,120,215,0.7);  	-o-box-shadow:0 1px 10px rgba(0,120,215,0.7);  }  /*巧用:after和:before，加上絕對定位的特點，形成一個圓角矩形*/  .effect:after,.effect:before{  	position: absolute;  	content: "";  	z-index:-1;  	top:50%;  	bottom:0;  	left:10px;  	right:10px;  	box-shadow:0 0 20px rgba(0,120,215,0.9);  	-webkit-box-shadow:0 0 20px rgba(0,120,215,0.9);  	-moz-box-shadow:0 0 20px rgba(0,120,215,0.9);  	-o-box-shadow:0 0 20px rgba(0,120,215,0.9);  	border-radius: 100px/10px;  	-webkit-border-radius: 100px/10px;  	-moz-border-radius: 100px/10px;  	-o-border-radius: 100px/10px;  	/*border-radius：100px/10px,表示的是，水平方向的半徑是100px，垂直方向是10px。*/    }

②翹邊陰影

原理：利用:before和:after，加上絕對定位的性質，可以形成一個矩形，這個時候結合CSS3的傾斜屬性skew和旋轉屬性rote。就可以形成一個有旋轉角度的平行四邊形，這個時候再和原來的矩形重疊，則可產生翹邊效果。

原理圖：

主要代碼：

html部分：

.wrap li img{  	width:350px;  	height:250px;  }    .wrap li:before{  	position: absolute;  	content: "";  	z-index: -2;  	width:325px;  	height:220px;  	left:22px;  	bottom:13px;  	background: transparent;  	box-shadow: 0 5px 30px rgba(0,0,0,1);  	-webkit-box-shadow: 0 5px 30px rgba(0,0,0,1);  	-moz-box-shadow: 0 5px 30px rgba(0,0,0,1);  	-o-box-shadow: 0 5px 30px rgba(0,0,0,1);  	transform:skew(-15deg) rotate(-5deg);  	-webkit-transform:skew(-15deg) rotate(-5deg);  	-moz-transform:skew(-15deg) rotate(-5deg);  	-o-transform:skew(-15deg) rotate(-5deg);  }  .wrap li:after{  	position: absolute;  	content: "";  	z-index: -2;  	width:325px;  	height:220px;  	left:22px;  	bottom:13px;  	-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.9);  	-moz-box-shadow: 0 5px 30px rgba(0,0,0,0.9);  	-o-box-shadow: 0 5px 30px rgba(0,0,0,0.9);  	box-shadow: 0 5px 30px rgba(0,0,0,0.9);  	-moz-transform:skew(15deg) rotate(5deg);  	-o-transform:skew(15deg) rotate(5deg);  	-webkit-transform:skew(15deg) rotate(5deg);  	transform:skew(15deg) rotate(5deg);  }

更多

完整代碼已分享到：

http://git.oschina.net/LuckyWinty/CSS3Shadow

更多CSS3實現的動畫效果demo，參考：

http://git.oschina.net/LuckyWinty/CSS3demo/tree/master/