想象一下以下 CSS:

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

在这种情况下,至少在 Chrome 下,元素的右上 Angular 和右下 Angular 像素是蓝色的,而不是黑色。是否有可能使它们变黑?

最佳答案

你不能用普通的 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

关于css - 控制哪个边框位置设置 CSS 中的 Angular 像素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27612611/

10-12 00:05
查看更多