改变右边界的高度

Question

我的右边界是100%高度:

border-right:1px solid #000000;

我想缩短它:

是否可以在不改变div高度的情况下使用CSS实现？我需要div为100%高度,只改变边界.

Answer 1

您可以使用伪元素替换右边框.您可以选择它的大小/位置,您可以使用它模拟边框:

小提琴

HTML:

<div></div>

CSS:

div {
    height:200px;
    width:500px;
    background:gold;
    position:relative;
    border-top:10px solid grey;
    border-bottom:2px solid #000;
}
div:after {
    content:"";
    position:absolute;
    top:20%;
    right:0;
    width:2px;
    height:60%;
    background:#000;
}

支持IE8见caniuse