css3图片阴影--曲线阴影/翘边阴影

最新推荐文章于 2024-07-26 08:45:03 发布

FrontJS

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量1.2k

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/TSeven37/article/details/81508504

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

把box-shadow的x和y都设置为0，阴影从四边同时出现设置box-shadow时注意浏览器兼容性如果是正的分别距离左边上面像素高度

一般不设置阴影的距离

1.border-radius: 100px /10px; 水平方向半径 / 垂直方向半径

2.设置盒子的宽高有两种方法第一种是直接设置width和height;第二种是设置position:absolute; top:值;left:值;right:值;bottom:值;设置4个值，间接地设置了width和height，4个值缺一不可

3.曲线阴影效果=1个直角阴影+2个重叠的曲线阴影（2个重叠的曲线阴影要放在直角阴影的下面）;

overflow的作用是：如果在这个.BOX盒子中的内容或者图片width和height超出了.BOX设置的width和height，那么超出的部分会隐藏并且不占位置。

clear的作用是：清除.BOX左右两边的浮动，这样无论屏幕尺寸多大，这个.BOX始终占满屏幕中的这一行位置。

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

翘边阴影

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;
}

效果

曲线阴影

ul,li{list-style:none;
      margin:0;
      padding:0;}

.wrap{width:700px;
      height:200px;
      margin:50px auto;
      background:#fff;}

.wrap h1{font-size:24px;
         text-align:center;
         line-height:200px;}

.effect{box-shadow:0px 1px 4px rgba(0,0,0,0.8),0px 0px 40px rgba(0,0,0,0.1) inset;
        position:relative;}

.effect:before,.effect:after{
	content:"";
	position:absolute;
	z-index:-1;
	background:#fff;
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	border-radius:100px/10px;
	box-shadow:0 0px 20px rgba(0,0,0,0.8);
}

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

.box li{width:300px;
        height:220px;
        margin:20px 10px;
        float:left;
        border:2px solid #efefef;
        background:#fff;
        position:relative;
        text-align:center;
        line-height:220px;
        font-size:30px;
        box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;}

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

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



.box li img{display:block;
            width:290px;
            height:210px;
            margin:5px;}

效果