css - 控制哪个边框位置设置 CSS 中的 Angular 像素

Question

想象一下下面的 CSS:

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

在这种情况下，至少在 Chrome 下，元素的右上角和右下角像素是蓝色的，而不是黑色的。有没有可能让它们变黑？

Answer 1

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

#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 元素的宽度高度和位置设置为边框的宽度。这产生了这种效果:

JSFiddle Demo