css3照片特效阴影（曲线投影和翘边投影）_css卡片式边框投影

作者：weixin_40725706 | 2024-03-18 23:23:32

踩

css卡片式边框投影

 
 主要语法 

  1、实现阴影 

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

  参数： 

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

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

  blur (可选)：模糊程度，值越大越模糊。 

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

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

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

  2、transform:skew实现图形转换 

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

  参数： 

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

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

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

  1、曲线投影 

  总共有两个元素，主元素在上层显示，下层的元素边框是弧线的，并且有一个阴影，然后只显示上层元素和下层阴影 

  如图 

  修改颜色，调整位置后 

  2、翘边阴影 

  三个元素,同理 


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>box-shadow</title>
<link rel="stylesheet" href="css/shadow.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;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;/*inset内阴影*/
}
 
.effect:before, .effect:after {/*两个 阴影效果更好*/
    content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    top: 50%;/*top/bottom/left/right 相当于设置宽高*/
    bottom: 0;
    left: 10px;
    right: 10px;
    border-radius: 100px / 10px;/*水平半径100 垂直10*/
}
 
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;
    line-height: 220px;
    font-size: 32px;
    text-align: center;
    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;
    transform: skew(-12deg) rotate(-4deg);/*skew图形转换（变形） 负值向左*/
    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;
    transform: skew(12deg) rotate(4deg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}
 
.box li img {
    width: 290px;
    height: 210px;
    padding: 5px;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/266126