改变右边界的高度

Question

我的右边框是100％高度：

border-right:1px solid #000000;

我想缩短它：

使用CSS而不改变div的高度是否可以实现？我需要div为100％高度，只改变边界。

Answer 1

您可以使用伪元素替换右边框。您可以选择它的大小/位置，然后用它模拟边框：

<强> FIDDLE

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

Answer 2

伪元素也可以这样做。我不知道这是否是您正在寻找的：

fiddle

`

div:after{
  content:'';
  height:150px;
  width:200px;
  border-right:1px solid yellow;
  position: absolute;
  top:30px;

}

Answer 3

我无法用普通的CSS来做到这一点。

您需要使用多个div来创建效果。

Answer 4

如果你把它分成2个div并给外部div分别是顶部和底部边框，并且只是为内部div指定了一个较小的高度和一个边距，它可以工作：

#outer {
    display:block;
    width:100px;
    height:80px;
    border-top:1px solid black;
    border-bottom:1px solid black;
}

#inner {
    display:block;
    width:100px;
    height:50px;
    margin-top:10px;
    border-right:1px solid black;
}

<强> HERE IS A DEMO

Answer 5

.cont {
  height : 200px;
  background: gray;
  position:relative;
}
.hr {
  width:2px;
  height:90%;
  background-color:red;
  position:absolute;
  right:0;
  top: 5%;
}

这是上面代码的fiddle