代码示例

阴影

单边阴影

利用box-shadow的向内收缩特性。

div {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.5);
}

相邻两侧阴影

收缩阴影的同时，加以位移。

div {
  box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.5);
}

相对两侧阴影

重点：box-shadow可以添加多个。

div {
  box-shadow:
    7px 0 5px -5px rgba(0, 0, 0, 0.5),
    -7px 0 5px -5px rgba(0, 0, 0, 0.5);
}

不规则阴影

几种情况：

  • 半透明的图片、background-image等等
  • dotted、dashed 边框、半透明边框
  • 气泡框一侧的三角形
  • 切去一角的容器

解决方案：使用filter属性的drop-shadow()方法。

div {
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

text-shadow和drop-shadow可以叠加：

div {
  text-shadow: 2px 2px fireBrick;
}

div > span {
  filter: drop-shadow(0.05em 0.05em 0 mistyRose);
}

色彩

CSS 版美图秀秀

filter可设置的方法有：

  • sepia()：怀旧效果
  • saturate()：饱和度
  • hue-rotate()：色调
img {
  transition: 0.5s filter;
  filter: sepia() saturate(4) hue-rotate(295deg);
}

img:hover,
img:focus {
  filter: none;
}
  • mix-blend-mode（混合模式）：当两个图层叠加的时候，决定上下层的颜色如何混合
  • luminosity（亮度）：采用上层的 hsl 亮度和下层的 色相饱和度
div {
  background: hsl(335, 100%, 50%);
}

div > img {
  mix-blend-mode: luminosity;
}

注意：mix-blend-mode无法运用于动画，但filter可以。

相似的属性：background-blend-mode，只混合背景。

div {
  background-blend-mode: luminosity;
  background-color: hsl(335, 100%, 50%);
  background-image: url(bg.png);
  background-size: cover;
  height: 440px;
  transition: 0.5s background-color;
  width: 640px;
}

div:hover {
  background-color: transparent;
}

毛玻璃

为内部添加和外部完全相同的背景，并施以blur滤镜。

div {
  overflow: hidden;
}

div > img {
  filter: blur(5px);
  height: 100%;
  transform: scale(1.2);
  width: 100%;
}

其他

折角效果

两个线性渐变，一个做出小角，一个铺设背景色。

div {
  background:
    linear-gradient(-135deg, transparent 50%, rgba(0, 0, 0, 0.4) 0)
      no-repeat 100% 0 / 2em 2em,

    // background-size 和渐变长度的计算方式不同
    // 此处需为 2 除以根号 2，不然叠不上
    linear-gradient(-135deg, transparent 1.414em, salmon 0);
}

如果要设置非 45° 的折角，只能苦练三角函数……

假设现在需要一个 1.5em 高度的 30° 折角：

div {
  // 预留折角的床位
  background: linear-gradient(-150deg, transparent 1.5em, salmon 0);

  border-radius: 0.5em;
  position: relative;
}

div::before {
  background:
    linear-gradient(to left bottom,
      transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.4))
      100% 0 no-repeat;
  border-bottom-left-radius: inherit;
  box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
  content: '';
  position: absolute;
    right: 0;
    top: 0;

  // 1.5em / cos30°
  width: 1.73em;

  // 1.5em / sin30°
  height: 3em;

  // 1.5em / cos30° - 1.5em / sin30°
  // 2 * 30 - 90
  transform: translateY(-1.3em) rotate(-30deg);

  transform-origin: bottom right;
}