阴影与翘边阴影效果的HTML+CSS实现-优快云博客

本文详细介绍了使用HTML和CSS创建阴影和翘边阴影效果的方法，包括如何利用伪元素和盒阴影属性来实现圆角层的阴影，并通过transform属性使阴影呈现出翘边形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点讲解：

阴影一要点：

1、用一个圆角的层，设置阴影，z-index层级低于父级即可；但是其相对定位的属性需要另外设置在另一个class上如下图设置在effect上而不设置在wrap上

2、圆角的层可用after和before来实现，如果after和before2个伪类都设置阴影并重叠起来，阴影效果更好。

翘边阴影要点：

1、同上用after和before伪类，设置class属性transform: skew(12deg) rotate(4deg) 弄成2个菱形；层级低于本身作为阴影

效果代码；

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>box-shadow</title>
<style>
    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;
}
</style>
</head>
<body>
  <div class="wrap effect">
     <h3>Shadow Effect</h3>
  </div>
  <ul class="box">
      <li><img src=""/></li>
      <li><img src=""/></li>
      <li><img src=""/></li>
  </ul>
</body>
</html>