有没有办法限制边界的长度?我有一个有底部边框的<div>，但我想在<div>的左边添加一个只延伸一半的边框。
有没有什么方法可以在不添加额外元素的情况下做到这一点?
当前回答
另一种方法是将边界图像与线性梯度结合使用。
div { 宽度:100 px; 身高:75 px; 背景颜色:绿色; background-clip:内容框;/*使背景颜色不低于边界*/ 左边框:5px纯黑色; 边界图像:线性梯度(到顶部，#000 50%，rgba(0,0,0,0) 50%);/*到顶部- 50%透明*/ border-image-slice: 1; ｝ < div > < / div >
jsfiddle: https://jsfiddle.net/u7zq0amc/1/
浏览器支持: 即:11 +
铬:
Firefox: 15 +
为了获得更好的支持，还可以添加供应商前缀。
caniuse border-image
其他回答
边界只能按边来定义，而不能按边的分数来定义。所以，不，你不能这样做。
另外，一个新元素也不会是边界，它只会模仿你想要的行为-但它仍然是一个元素。
# mainDiv { 身高:100 px; 宽度:80 px; 位置:相对; Border-bottom: 2px solid #f51c40; 背景:# 3 beadc; ｝ # borderLeft { Border-left: 2px solid #f51c40; 位置:绝对的; 上图:50%; 底部:0; ｝ < div id = " mainDiv " > < div id = " borderLeft " > < / div > < / div >
另一种解决方案是使用背景图像来模拟左侧边框的外观
创建所需的左边框样式作为图形 将其放置在div的最左边(使其足够长，以处理旧浏览器中大约两次文本大小的增加) 设置垂直位置的50%从你的div顶部。
你可能需要为IE做一些调整(像往常一样)，但如果这是你想要的设计，那么值得一试。
我通常反对使用CSS固有的图像，但有时如果设计需要它，没有其他的方法。
CSS生成的内容可以为您解决这个问题:
div { 位置:相对; ｝ /*主div的边界扩展到50%从左下角*/ div:{后 内容:“”; 背景:黑色; 位置:绝对的; 底部:0; 左:0; 高度:50%; 宽度:1 px; ｝ < div > Lorem Ipsum < / div >
(注——内容:“”;声明是必须的，以便pseudo元素呈现)
另一种方法是将边界图像与线性梯度结合使用。
div { 宽度:100 px; 身高:75 px; 背景颜色:绿色; background-clip:内容框;/*使背景颜色不低于边界*/ 左边框:5px纯黑色; 边界图像:线性梯度(到顶部，#000 50%，rgba(0,0,0,0) 50%);/*到顶部- 50%透明*/ border-image-slice: 1; ｝ < div > < / div >
jsfiddle: https://jsfiddle.net/u7zq0amc/1/
浏览器支持: 即:11 +
铬:
Firefox: 15 +
为了获得更好的支持，还可以添加供应商前缀。
caniuse border-image
