控制在CSS中设置角点像素的边框位置

想象一下下面的CSS：

#foo {
    border: 1px solid black;
    border-right: 1px solid blue;
}

在这种情况下，至少在Chrome下，元素的右上角和右下角像素是蓝色，而不是黑色。可以把它们变成黑色吗？

我希望我糟糕的photoshop技能能向你解释边界

如果你看正方形的四个角，你可以看到一些小线条，这是一个边框开始的地方，下一个边框开始的地方

这永远是个问题：p

你可以把它做成背景图像（糟糕的方式）

---

或者您可以使用其他div来制作边框（也很糟糕）

您不能使用普通的CSS边框选项，但是如果您愿意，您仍然可以使用纯CSS解决方案： 基本上，您要做的是使用CSS创建两个伪元素，并覆盖各个角落：

#foo {
    border: 100px solid black;
    border-right: 100px solid blue;
    height:300px;
    position:relative;
}
#foo:after, #foo:before{
    content:'';
    background:black;
    width:100px;
    height:100px;
    display:block;
    position:absolute;
}
#foo:after{
    bottom:-100px;
    right:-100px;
}
#foo:before{
   top:-100px;
    right:-100px;
}

它可能有点凌乱，但它起作用了。将

：after

和

：before

元素的宽度、高度和位置设置为边框的宽度。 这就产生了这样的效果：

---

第一种解决方案是使用伪元素，您将对其进行绝对定位以覆盖右边框。为了确保它完全覆盖边界，您必须将其顶部、底部和右侧位置偏移边界宽度的负值。在本例中，我使用了

5px的宽度来更好地说明示例：


#foo{
背景色：#eee；
边框：5px纯灰；
宽度：100px；
高度：100px；
位置：相对位置；
}
#福：以前{
内容：''；
位置：绝对位置；
顶部：-5px；
底部：-5px；
右：-5px；/*按边框宽度移动*/
背景颜色：蓝色；
宽度：5px；
}
正如其他人所指出的，您的问题是如何在CSS中绘制边框

问题


解决这个问题的最简单方法是使用一个。由于此解决方法完全依赖于
边框宽度的值，因此我将展示一个使用变量的示例，以帮助明确宽度值的来源

注意：您不需要SCS来解决此问题，使用变量只会有助于可读性/可维护性

HTML:

演示：

希望您能清楚地看到，
$border width
可以用
30px
这样的值替换它


#foo {
  border: 30px solid black;
  border-right: 30px solid blue;
}

<div id="foo"></div>

/* Set SCSS variable */
$border-width: 30px;

#foo {
  border: $border-width solid black;
  position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
  content: '';
  background: blue;
  width: $border-width;
  height: 100%;
  position: absolute;
  right: -$border-width;
}