css边框左高50%

我希望我的div的左边框只显示到div的一半。我也希望对我的右边框执行相同的操作，但应该设置为从div的底部到div的中间。我如何实现它？

好问题。无法使用border属性

如果您可以将div的

位置设置为
相对
，那么您想到的唯一一件事就是使用绝对定位的、1像素宽的
div
。未进行彻底测试，但应能正常工作：



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

记住，周围的
div
必须是
position:relative
，才能起作用。我不确定50%的高度设置是否能在所有浏览器中保持一致——请确保您对其进行了测试。如果没有，您可能不得不求助于像素度量。
一种类似但不同的@Pekka方法：使用
：after
伪选择器，如下所示：


.mybox{
位置：相对位置；
填充：10px 20px；
背景色：#EEEEEE；
}
.我的盒子：之后{
内容：''；
位置：绝对位置；
底部：0px；
左：25%；
宽度：50%；
边框底部：1px实心#0000CC；
}

盒子里的东西。
您可以使用：

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

文本可见，但边框颜色仅为div大小的一半。
2018:对于现代浏览器：

您可以使用带有梯度的
边框图像
，例如

边界图像：线性梯度（到底部，rgba（0,0,0,0）25%，rgba（0,0,0,1）25%，rgba（0,0,0,1）75%，rgba（0,0,0,0）75%）；
边界图像切片：1；


演示：

工具：

我可以使用：（IE11）
对于那些试图使用border left实现上述Aleksandr Belugin答案的人，这里是：


.mybox{
位置：相对位置；
填充：10px 20px；
背景色：#EEEEEE；
}
.我的盒子：之后{
内容：''；
位置：绝对位置；
左：0px；
最高：25%；
身高：50%；
左边框：1px实心#0000CC；
}

盒子里的东西。
您不能直接执行此操作。有几种方法可以解决这个问题。但首先，你有固定的宽度和/或高度吗？你必须假装它。图像，js，假div…是的，它是一个固定的宽度。我知道我可以通过指定一些图像等来做到这一点。我如何使用JS？侧注来做到这一点，因为这是我比较流行的答案之一：如果需要，还可以使用
：before
伪选择器。经销商的选择。我在这里使用
：after
的唯一原因是因为我喜欢视觉层次，所以底部的东西是
：after
。完美的解决方案！这仅在设置位置：绝对时有效；在子div上。按照您的答案书写方式，如果父div中有其他内容，则子div将相对于其他内容放置。
line-height:50%; /*(or less, much less)*/
overflow:visible;