利用box-shadow属性实现页面层叠效果

转载于 2018-05-16 17:16:00 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ivanlee-ee-233/p/9046973.html

本文介绍如何使用 CSS 的 box-shadow 属性来实现复杂的阴影效果。通过多个 box-shadow 值叠加，可以创建出丰富的视觉效果。文章详细解析了 box-shadow 的各个参数含义及其在实际案例中的应用。

效果图如下

box-shadow的语法

代码展示

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
              0 8px 0 -3px #f6f6f6,
              0 9px 1px -3px rgba(0, 0, 0, 0.2),
              0 16px 0 -6px #f6f6f6,
              0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

代码解释

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
              0 8px 0 -3px #f6f6f6,
              0 9px 1px -3px rgba(0, 0, 0, 0.2),
              0 16px 0 -6px #f6f6f6,
              0 17px 2px -6px rgba(0, 0, 0, 0.2);

*分别设置四条边（上右下左）的阴影。每个值：x偏移，y偏移，模糊距离（模糊半径），阴影尺寸，阴影颜色

转载于:https://www.cnblogs.com/ivanlee-ee-233/p/9046973.html