任何方式来限制边界的长度？
有什么办法来限制边界的长度。 我有一个具有底部边框的<div> ，但是我想在<div>的左边添加一个只能延伸一半的边框。
有没有办法做到这一点，而无需在页面上添加额外的元素？
希望这可以帮助：
#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>
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; }
（注意 – content: "";声明是必要的，以便伪元素呈现）
:after岩石:)
如果你玩了一下，你甚至可以设置你resize的边框元素显示居中，或只有当旁边有另一个元素（如菜单）时出现。 这里是一个菜单的例子：
#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; }
#menu > ul > li { position: relative; float: left; padding: 0 10px; list-style: none; } #menu > ul > li + li:after { content: ""; background: #ccc; position: absolute; bottom: 25%; left: 0; height: 50%; width: 1px; }
<div id="menu"> <ul> <li>Foo</li> <li>Bar</li> <li>Baz</li> </ul> </div>
对于水平线，您可以使用hr标签：
hr { width: 90%; }
但不可能限制边界的高度。 只有元素的高度。
使用CSS属性，我们只能控制边框的粗细; 不是长度。
但是，我们可以模仿边界效应，并以其他方式控制其width和height 。
使用CSS（线性渐变）：
我们可以使用linear-gradient()来创build背景图像，并使用CSS控制其大小和位置，使其看起来像一个边框。 由于我们可以将多个背景图像应用到元素，我们可以使用此function创build多个边界像图像并应用于元素的不同侧。 我们还可以用一些纯色，渐变或背景图像覆盖剩余的可用区域。
必需的HTML：
我们所需要的只是一个元素（可能有一些类）。
<div class="box"></div>
脚步：
- 使用
linear-gradient()创build背景图像。 - 使用
background-size来调整上面创build的图像的width/height，使其看起来像一个边框。 - 使用
background-position来调整上面创build的边框的位置（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 ie 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()我们可以创build纯色边框以及渐变。 以下是使用此方法创build的边框的一些示例。
仅在一侧应用边框的示例：
.container { display: flex; } .box { background-image: linear-gradient(purple, purple), linear-gradient(steelblue, steelblue); background-repeat: no-repeat; background-size: 4px 50%, calc(100% - 4px) 100%; background-position: left bottom, 4px 0; height: 160px; width: 160px; margin: 20px; } .gradient-border { background-image: linear-gradient(red, purple), linear-gradient(steelblue, steelblue); }
<div class="container"> <div class="box"></div> <div class="box gradient-border"></div> </div>
边界仅限于每边，而不是边的分数。 所以，不，你不能这样做。
而且，一个新的元素也不会是一个边界，它只会模仿你想要的行为 – 但它仍然是一个元素。
这是一个CSS技巧，而不是一个正式的解决scheme。 我把代码保留为黑色，因为它帮助我定位元素。 之后，将您的内容（颜色：白色）和（margin-top：-5px左右）颜色化，以使该时段不存在。
div.yourdivname:after { content: "."; border-bottom:1px solid grey; width:60%; display:block; margin:0 auto; }
另一个解决scheme是你可以使用背景图像模仿左边框的外观
- 创build所需的边框左侧样式作为graphics
- 将其放在div的最左侧（使其足够长，以便处理旧版浏览器的两个文本大小）
- 从你的div的顶部设置垂直位置50％。
您可能需要调整IE浏览器（按照惯例），但如果这是您要devise的devise，那么值得一试。
- 我通常反对使用图像的CSS本质上提供的东西，但有时如果devise需要它，没有其他方式。
您只能在每面定义一个边框。 你将不得不添加一个额外的元素！
另一种做法是将边界图像与线性渐变结合使用。
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>
