如何创建一个完全覆盖CSS中相邻角落的边框？

Question

我有一个1px边框的div,我正在尝试用另一种颜色为该div创建一个3px边框.我正在使用此代码:

box {
  border: 1px solid #ddd;
  border-top: 3px solid #3F9BD0;
}

但在角落边界不好,见图:

如何使这个边框看起来很好,像这样:

小提琴:https://jsfiddle.net/15tory3z/

Answer 1

而不是border-top尝试使用:after伪元素来重新创建所需的效果.

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ddd;
  position: relative;
}
.box:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  top: -5px;
  background: dodgerblue;
  padding: 1px;
  left: -1px;
}

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

选择2:

使用linear-gradient().

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ddd;
  background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
  background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
  background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
  background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
  background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}

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

Answer 2

您可以使用插入阴影和填充绘制这些:

div {
  padding:12px 5px 5px;
  width: 40%;
  height: 200px;
  box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px  gray
}

<div></div>

或者只是一个开头的顶影

div {
 
  width: 40%;
  height: 200px;
  border:2px solid gray;
  border-top:none;
  box-shadow:  0 -10px #3F9BD0;
  margin-top:12px;
}

<div></div>

否则,background可以使用渐变,甚至动画2个例子:http://codepen.io/gc-nomade/pen/IGliC或http://codepen.io/gc-nomade/pen/pKwby

Answer 3

这也是一条线:

.box1 {
  border: 10px solid #ddd;
  border-top: 0;
  box-shadow: 0 -30px 0 #3F9BD0;
  float: left;
  width: 300px;
  height: 300px;
}

<div class="box1"></div>