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

前端之家收集整理的这篇文章主要介绍了如何创建一个完全覆盖CSS中相邻角的边框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个具有1px边框的div,我正在尝试为该div创建另一种颜色的3px边框。我使用这个代码
Box {
  border: 1px solid #ddd;
  border-top: 3px solid #3F9BD0;
}

但在角落边界不好,看图像:

如何让这个边框看起来不错,就像这样:

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

解决方法

而不是边框​​顶端,尝试使用 :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,#fff 5%);
  background: -o-linear-gradient(top,#fff 5%);
  background: -ms-linear-gradient(top,#fff 5%);
  background: linear-gradient(top,#fff 5%);
}
<div class="Box"></div>

猜你在找的CSS相关文章