css border-left 50％height

Question

我希望div的左边框只显示div的一半。我想对我的右边界做同样的事情，但是应该从div的底部到div的中间设置。我怎样才能实现它？

Answer 1

@ Pekka的一种类似但不同的方法：使用:after伪选择器，如下所示：

HTML标记：

<div class="mybox">
    Le content de box.
</div>

<强> CSS：

.mybox {
    position: relative;
    padding: 10px 20px;
    background-color: #EEEEEE;
}

.mybox:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 25%;
    width: 50%;
    border-bottom: 1px solid #0000CC;
}

...以及jsFiddle以获得良好的衡量标准。

Answer 2

好问题。使用border属性是不可能的。

唯一想到的是，如果您可以将div position设置为relative，则使用绝对定位的1像素宽div。没有经过全面测试，但应该工作：

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
 &nbsp;
</div>

您在右侧执行相同的操作，将left属性替换为right。

请注意，周围的div需要position: relative才能生效。我不确定50％的高度设置是否会在整个浏览器中保持一致 - 确保您进行测试。如果不这样做，您可能不得不求助于像素度量。

Answer 3

对于那些试图使用border-left实现上述Aleksandr Belugin答案的人，这里是：

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  left: 0px;
  top: 25%;
  height: 50%;
  border-left: 1px solid #0000CC;
}

<div class="mybox">
  Le content de box.
</div>

Answer 4

2018年：对于现代浏览器：

您可以使用border-image渐变之类的东西......

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;

演示： https://jsfiddle.net/hz8wp0L0/

工具： Gradient Editor

我可以使用： border-image （IE11）

Answer 5

您可以使用：

line-height:50%; /*(or less, much less)*/
overflow:visible;

文本可见，但边框颜色仅为div大小的一半。