有什么办法限制边框长度吗？
Answers:
希望这可以帮助：
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}<div id="mainDiv">
<div id="borderLeft"></div>
</div>
5
这似乎仍然是最好的方法。它与跨浏览器兼容并且易于维护。
—
Pim Schaaf 2012年
有没有办法做到这一点？
—
www139 2015年
将框阴影应用于圆。
—
Piyush Dholariya'3
与古老的浏览器相比，这可能具有少量的跨浏览器兼容性优势，并且更容易通过JS进行控制...但是这些都不是原始问题的关注点。但是，这确实在标记中添加了一个额外的元素，原始问题专门要求避免该标记。所以我不明白为什么这是这个问题的可接受答案。
—
Spencer O'Reilly，
有这样做：后将不需要任何额外的标记
—
马克
CSS生成的内容可以为您解决此问题：
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}<div>Lorem Ipsum</div>（注意- content: "";为了使伪元素能够呈现，声明是必需的）
我认为从语义上讲这是一个更好的选择，因为它不会引入其他div。
—
Louis Otto
这应该是公认的答案，因为它支持CSS作为标记样式的唯一方式。
—
卢卡斯
完善。它也可以按预期与padding和margin一起使用。
—
Nolonar
请记住：您无法通过JS管理伪元素属性（实际上可以，但是会很麻烦）。因此，如果您打算使用此解决方案创建某种进度条-那就算了。选择已经接受的答案。在所有其他情况下，这个答案都更好，是的。
—
谢尔盖·潘菲洛夫
这个跨浏览器和/或JS兼容吗？我喜欢接受的答案，因为@SergeyPanfilov的评论。
—
matthaeus
该:after岩石:)
如果您玩了一点，甚至可以将调整大小的边框元素设置为居中显示，或者仅在旁边有另一个元素时才显示（如菜单中所示）。这是带有菜单的示例：
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
}
#menu > ul > li + li:after {
content:"";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
您可以添加HTML示例吗？您认为谁将它与表格单元格一起使用，有些线索？
—
彼得·克劳斯
使用CSS属性，我们只能控制边框的厚度；不长。
然而，我们可以模仿边界效应并控制其width和height为我们与其他一些方面想。
使用CSS（线性渐变）：
我们可以使用linear-gradient()CSS创建背景图像并控制其大小和位置，以使其看起来像边框。由于我们可以将多个背景图像应用于一个元素，因此我们可以使用此功能创建多个类似边框的图像，并将其应用于元素的不同侧面。我们还可以用一些纯色，渐变或背景图像覆盖剩余的可用区域。
所需的HTML：
我们需要的只是一个元素（可能有一些类）。
<div class="box"></div>脚步：
- 使用创建背景图像
linear-gradient()。 - 用
background-size调整width/height上面创建的图像（S），使得它看起来像一个边界。 - 使用
background-position调整位置（如left，right，left bottom将上面创建的边界（或多个）等）。
必要的CSS：
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}例子：
用 linear-gradient()我们，我们可以创建纯色以及具有渐变的边框。下面是使用此方法创建的边框的一些示例。
仅在一侧应用边框的示例：
在两侧应用边框的示例：
在所有边都应用边框的示例：
屏幕截图：
做到这一点的另一种方法是结合使用边界图像和线性渐变。
div {
width: 100px;
height: 75px;
background-color: green;
background-clip: content-box; /* so that the background color is not below the border */
border-left: 5px solid black;
border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
border-image-slice: 1;
}<div></div>jsfiddle：https ://jsfiddle.net/u7zq0amc/1/
浏览器支持：IE：11+
Chrome：全部
Firefox：15岁以上
为了获得更好的支持，还添加供应商前缀。
这是CSS技巧，不是正式的解决方案。我将代码保留为黑色，因为它可以帮助我定位元素。然后，为您的内容上色（color：white）和（margin-top：-5px左右），使其看起来好像没有句点。
div.yourdivname:after {
content: ".";
border-bottom:1px solid grey;
width:60%;
display:block;
margin:0 auto;
}