多重边框

发表于

本例为《CSS揭秘》内容，仅用来练手学习。

box-shadow

用来设置对象阴影。

  • none:无阴影
  • length-1:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
  • length-2:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
  • length-3:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
  • length-4:如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
  • color:设置对象的阴影的颜色。
  • inset:设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

特殊用法

当偏移值都为0，模糊值也为0，一个正的外延值(length-4)，得到的投影就像一道实线边框。如：

1
2
3
4
5
6
{
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655,
              0 0 0 20px pink,
              0 2px 5px 20px rgba(0, 0, 0, 0.6);
}


注意

  1. 支持逗号分隔语法，可以创建任意数量的投影。
  2. box-shadow是层层叠加的，第一层位于最顶部，因此后面的半径要大于前面的半径。

outline

如果我们只需要两层边框，那么我们可以先设置常规的边框，然后用outline设置外层的边框。

1
2
3
4
5
{
  background: yellowgreen;
  border: 10px solid #655;
  outline: 10px solid pink;
}

注意：outline还可以产生虚线边框。outline-offset可以控制边框与元素边缘之间的间距，可以接受负值。如下图的简单缝边效果。

1
2
3
4
5
6
{
  background: #655;
  border-radius: 10px;
  outline: 2px dashed white;
  outline-offset: -14px;
}


注意：

  1. outline只适用于双层边框。
  2. 边框不贴合border-radius所产生的圆角。