css 边框左 50% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2837440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css border-left 50% height
提问by niao
I want the left border of my div to show only to the half of the div. The same I would like to do to my right border but is should be set from the bottom of the div to the middle of the div. How can I achieve it?
我希望我的 div 的左边框只显示到 div 的一半。我想对我的右边框做同样的事情，但应该从 div 的底部设置到 div 的中间。我怎样才能实现它？
采纳答案by Pekka
Good question. It's not possible using the border property.
好问题。使用边框属性是不可能的。
The only thing that comes to mind, if you can set your div's positionto relative, is to use an absolutely positioned, 1 pixel wide div. Not thoroughly tested but this shouldwork:
唯一想到的是，如果您可以将 div 设置position为relative，则是使用绝对定位的 1 像素宽div。没有经过彻底测试，但这应该有效：
<div style='width: 1px; top: 0px; bottom: 50%; left: 0px;
background-color: blue; overflow: hidden'>
</div>
You'd do the same on the right hand side, replacing the leftproperty by right.
你会在右手边做同样的事情，用 替换left属性right。
Remember, the surrounding divneeds to be position: relativefor this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.
请记住，div需要周围环境才能position: relative使其发挥作用。我不确定 50% 的高度设置是否会在整个浏览器中始终如一地工作 - 请务必对其进行测试。如果没有，您可能不得不求助于像素度量。
回答by indextwo
A sort-of similar but different approach to @Pekka's: use the :afterpseudo-selector, like so:
@Pekka 的一种类似但不同的方法：使用:after伪选择器，如下所示：
.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;
}<div class="mybox">
Le content de box.
</div>...and a jsFiddlefor good measure.
...和一个jsFiddle很好的衡量标准。
回答by l2aelba
2018:For modern browsers:
2018 年：对于现代浏览器：
You can use border-imagewith gradients something like...
您可以使用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;
Demo:https://jsfiddle.net/hz8wp0L0/
演示：https : //jsfiddle.net/hz8wp0L0/
Tool:Gradient Editor
工具：渐变编辑器
Can I Use :border-image(IE11)
我可以使用：边框图像（IE11）
回答by Natan Graaf
You can use:
您可以使用：
line-height:50%; /*(or less, much less)*/
overflow:visible;
The text is visible, but the border color will be only at half of the div size.
文本可见，但边框颜色仅为 div 大小的一半。
回答by Jacob
For those trying to implement Aleksandr Belugin's answer above using border-left, here it is:
对于那些试图使用左边界来实现 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>