css3实现翘边阴影

最新推荐文章于 2021-08-21 08:49:01 发布

望月归乡

最新推荐文章于 2021-08-21 08:49:01 发布

阅读量888

点赞数

分类专栏： css3 文章标签： css3 transform after before

本文链接：https://blog.csdn.net/sinat_32546159/article/details/58586088

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css3实现翘边阴影涉及到以下知识点：

阴影：box-shadow

转换：transform

插入：:after与:before

box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset

参数：

h-shadow (必需)：水平阴影的位置。允许负值。

v-shadow (必需)：垂直阴影的位置。允许负值。

blur (可选)：模糊距离。

spread (可选)：阴影的尺寸。

color (可选)：阴影的颜色。请参阅CSS颜色值。

inset (可选)：将外部阴影(outset)改为内部阴影。

浏览器兼容：

IE9+、Firefox4、Chrome、Opera以及Safari5.1.1 支持box-shadow属性。

transform:

• 功能：向元素应用 2D 或 3D 转换

• 语法： transform: none|transform -functions

• 参数：

skew(x- angle,y -angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX (angle) 定义沿着 X 轴的 2D 倾斜转换。

skewY (angle) 定义沿着 Y 轴的 2D 倾斜转换。

:after与:before用法

• :after 选择器：在被选元素的内容后面插入内容

• :before 选择器：在被选元素的内容后面插入内容

• 说明：需使用 content 属性来指定要插入的内容

浏览器兼容

IE9+、Firefox4、Chrome、Opera以及 Safari支持 box-shadow属性。

对于 IE8 及更早版本中的 :after，必须声明 <!DOCTYPE>。

下面是html结构：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>box-shadow</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="wrap effect">
     <h3>Shadow Effect</h3>
  </div>
  <ul class="box">
      <li><img src="images/photo1.jpg"/></li>
      <li><img src="images/photo2.jpg"/></li>
      <li><img src="images/photo3.jpg"/></li>
  </ul>
</body>
</html>

css样式部分：

body{
    font-family:Arial;
    font-size:23px;
}
.wrap h3{
  text-align:center;
  position:relative;
  top:80px;
}
.wrap {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

.effect{
  position:relative;       
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
}
 .effect:before, .effect:after{
    content:"";
	position:absolute; 
	z-index:-1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
} 

ul.box {
	width:980px;
	height:auto;
	margin: 20px auto;
	padding: 0;
	clear: both;
	overflow: hidden; 
}

ul.box li {
	list-style-type: none;
	margin:20px 10px;
	padding: 0;
	width: 300px;
	height: 220px;
	border: 2px solid #efefef;
	position: relative;
	float: left;
	background: #ffffff; /* old browsers */
	line-height:220px;
	font-size:32px;
	text-align:center;
	
	
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; 
	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	
}

ul.box li:before { 
	 z-index: -2;  
	position: absolute; 
	background: transparent; 
	width: 90%; 
	height: 80%; 
	content: ''; 
	left: 20px; 
	bottom:8px; 
	
	 -webkit-transform: skew(-12deg) rotate(-4deg); 
	 	-moz-transform:skew(-12deg) rotate(-4deg); 
	 	-o-transform: skew(-12deg) rotate(-4deg); 
	 	-ms-transform: skew(-12deg) rotate(-4deg);  
	
	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	
}

 ul.box li:after { 
	z-index: -1; 
	position: absolute; 
	background: transparent; 
	width: 90%; 
	height: 80%; 
	content: ''; 
	right:20px;  
	bottom:8px; 
	
	-webkit-transform: skew(12deg) rotate(4deg); 
	-moz-transform:skew(12deg) rotate(4deg); 
	-o-transform: skew(12deg) rotate(4deg); 
	-ms-transform: skew(12deg) rotate(4deg); 
	
	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 

}  

.box li img{
	width:290px;
	height:210px;
	padding:5px;
}

效果图如下：