需求

在不增加冗余结构的情况下，只使用CSS绘制多重边框，如下图所示。

image.png

方法

box-shadow方案
box-shadow的第四个参数（称为扩张半径），通过指定正/负值，可以让投影面积增大/减小。可用来模拟边框。

.box {
  border: 10px solid #ccc;
  box-shadow: 0 0 0 10px #efdada,
              0 0 0 20px rgb(234, 137, 137);
}

（box-shadow可用逗号分隔，从而指定多个边框）

outline方案
只需要两层边框的时候，外层边框可借助outline实现。

.box {
  outline: 10px solid #efdada;
}

(outline-offset属性可以控制它和元素之间的间距，可为负）

css：绘制多重边框
需求在不增加冗余结构的情况下，只使用CSS绘制多重边框，如下图所示。方法 box-shadow方案box-sh...
《css-secrets》-demo：多重边框
《css-secrets》多重边框关键字：边框;box-shadow;outline 需求描述实现如下多重边...
css之border
css边框属性通过css3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 border-radius b...
【CSS】多重边框
要设置多重边框，最要用到的是box-shadow这个样式。 box-shadow 的作用是添加投影。如果要设置多...
好程序员web前端培训分享CSS3 边框
好程序员web前端培训分享CSS3 边框，通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 ...
day01
1.边框透明 2.背景的绘制区域 3.多重边框 4.双重边框 5.灵活的背景定位（background-posit...
CSS揭秘——多重边框
如果我们想为一个元素设置边框，很自然的会利用 border 属性，比如说，我想得到如下效果。非常简单的，我们只需...
CSS实现多重边框
实现这样的效果简单但要实现这样的效果，不包裹div的前提下，使用outline属性但要实现这样的效果 out...
CSS3 边框
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 Photo...
CSS3边框
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 Photo...