有没有办法限制边界的长度?我有一个有底部边框的<div>，但我想在<div>的左边添加一个只延伸一半的边框。
有没有什么方法可以在不添加额外元素的情况下做到这一点?
当前回答
伪元素岩石之后的:::)
如果你玩一点，你甚至可以设置你的调整大小的边界元素显示居中，或者只有当它旁边有另一个元素时才出现(就像在菜单中)。下面是一个菜单的例子:
#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;
}
#菜单> ul > li { 位置:相对; 浮:左; 填充:0 10px; list-style:没有; ｝ #menu > ul > li + li::after { 内容:“”; 背景:# ccc; 位置:绝对的; 底部:25%; 左:0; 高度:50%; 宽度:1 px; ｝ < div id =“菜单”> < ul > <李> Foo李< / > <李>栏李< / > <李>记者李< / > < / ul > < / div >
其他回答
边界只能按边来定义，而不能按边的分数来定义。所以，不，你不能这样做。
另外，一个新元素也不会是边界，它只会模仿你想要的行为-但它仍然是一个元素。
每条边只能定义一个边框。您必须为此添加一个额外的元素!
对于水平线，你可以使用hr标签:
hr { width: 90%; }
但是限制边界高度是不可能的。只有元素高度。
伪元素岩石之后的:::)
如果你玩一点，你甚至可以设置你的调整大小的边界元素显示居中，或者只有当它旁边有另一个元素时才出现(就像在菜单中)。下面是一个菜单的例子:
#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;
}
#菜单> ul > li { 位置:相对; 浮:左; 填充:0 10px; list-style:没有; ｝ #menu > ul > li + li::after { 内容:“”; 背景:# ccc; 位置:绝对的; 底部:25%; 左:0; 高度:50%; 宽度:1 px; ｝ < div id =“菜单”> < ul > <李> Foo李< / > <李>栏李< / > <李>记者李< / > < / ul > < / div >
另一种解决方案是使用背景图像来模拟左侧边框的外观
创建所需的左边框样式作为图形 将其放置在div的最左边(使其足够长，以处理旧浏览器中大约两次文本大小的增加) 设置垂直位置的50%从你的div顶部。
你可能需要为IE做一些调整(像往常一样)，但如果这是你想要的设计，那么值得一试。
我通常反对使用CSS固有的图像，但有时如果设计需要它，没有其他的方法。
