css3照片特效阴影（曲线投影和翘边投影）

最新推荐文章于 2024-06-21 11:27:52 发布

花花最美腻

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量3.8k

点赞数 1

分类专栏： css3 文章标签： css3 shadow

本文链接：https://blog.csdn.net/qq_38912819/article/details/80645639

版权

css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

 
 主要语法 

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

花花最美腻

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css3照片特效阴影（曲线投影和翘边投影）

主要语法1、实现阴影box-shadow: h-shadow v-shadow blur spread color inset参数： h-shadow (必需)：水平阴影的位置。允许负值。 v-shadow (必需)：垂直阴影的位置。允许负值。 blur (可选)：模糊程度，值越大越模糊。 spread (可选)：阴影的尺寸。 color (可选)：阴影的颜色。请参阅...
复制链接

扫一扫

专栏目录