想象一下以下 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/