# 边框

# 半透明边框

TIP

默认情况下，我们设置的背景模浸染到border边框下面，如果这不是我们希望的话，可以通过background-clip:padding-box属性来更改它的默认行为

下面是半透明边框的html结构：

<div class="border-box"></div>

下面是半透明边框的代码css代码：

.border-box {
  background-color: #58a;
  border: 10px solid rgba(0,0,0,0.3);
  background-clip: padding-box
}

👇你可以点击下面的复选框，来查看padding-box属性值的实时效果：

padding-box

TIP

box-shadow除了可以用来添加投影以外，还可以用来设计边框，多重边框可以使用box-shadow和outline来实现。

下面是多重边框的html代码：

<div class="multiple-border"></div>

下面是多重边框的css代码：

.multiple-border {
  background-color: #58a;
  box-shadow: 0 0 0 10px #fb3;
  outline: 1px dashed #333;
  outline-offset: -10px;
}

下面是多重边框的实现效果：

我们知道，使用box-shadow设计出来的边框，它会仅仅贴合在border-radius的圆角边，像下面这样：

background-color: #58a;
border-radius: 15px;
box-shadow: 0 0 0 5px #fb3;

而使用outline设计出来的边框，它不会贴合在border-radius创建出来的圆角边，像下面这样：

background-color: #58a;
border-radius: 15px;
outline: 5px solid #fb3;

那么要结合这种个CSS属性，就能实现边框内圆角的效果，像下面这样：

<div class="combine"></div>

.combine {
  /* 关键代码 */
  outline: 8px solid #fb3;
  box-shadow: 0 0 0 6px #fb3;
}

box-shadow 边框的大小：

👆 你可以勾选复选框，查看实时效果，👆你也可以更改box-shadow的发散宽度来查看🔎一个隐藏的小问题。

WARNING

如果要利用上述方案实现边框内圆角的效果，那么你outline的宽度和box-shaodw的发散宽度一定要是合理设计过的，不然它会有一点没有遮盖到。