有办法限制边界长度吗?

有没有办法限制边界的长度?我有一个<div>，它有一个底部边界，但我想在<div>的左边添加一个边界，它只延伸到上面的一半。

有没有什么方法可以在不添加额外元素的情况下做到这一点?

674535 次浏览
小开

每条边只能定义一个边框。您必须为此添加一个额外的元素!

小开

边界只能按边来定义，而不能按边的分数来定义。所以，不，你不能这样做。

另外，一个新元素也不会是边界，它只会模仿你想要的行为-但它仍然是一个元素。

小开

对于水平线，你可以使用hr标签:

hr { width: 90%; }

但是限制边界高度是不可能的。只有元素高度。

小开

另一种解决方案是使用背景图像来模拟左侧边框的外观

  1. 创建所需的左边框样式作为图形
  2. 将其放置在div的最左边(使其足够长，以处理旧浏览器中大约两次文本大小的增加)
  3. 设置垂直位置的50%从你的div顶部。

你可能需要为IE做一些调整(像往常一样)，但如果这是你想要的设计，那么值得一试。

  • 我通常反对使用CSS固有的图像，但有时如果设计需要它，没有其他的方法。
小开
最佳答案 

#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;
}
<div>Lorem Ipsum</div>

(note - the content: ""; declaration is necessary in order for the pseudo-element to render)

小开

::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;
}


#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>

小开

这是一个CSS技巧，不是一个正式的解决方案。我保留黑色句点的代码，因为它可以帮助我定位元素。然后，给你的内容上色(颜色:白色)和(margin-top:-5px左右)，让它看起来好像句号不存在。

div.yourdivname:after {
content: "";
border-bottom: 1px solid grey;
width: 60%;
display: block;
margin: 0 auto;
}

关于此问题的文章:https://www.steckinsights.com/shorten-length-border-bottom-pure-css/

小开

使用CSS属性，我们只能控制边框的厚度;不是长度。

但是，我们可以用其他方法模拟边界效果并控制它的width和height。

使用CSS(线性梯度):

我们可以使用linear-gradient()创建一个背景图像，并使用CSS控制它的大小和位置，使它看起来像一个边界。由于我们可以将多个背景图像应用到一个元素，我们可以使用这个特性来创建多个类似图像的边界，并应用于元素的不同侧面。我们还可以用一些纯色、渐变或背景图像覆盖剩余的可用区域。

HTML:

我们只需要一个元素(可能有一些类)。

<div class="box"></div>

步骤:

  1. 使用linear-gradient()创建背景图像。
  2. 使用background-size来调整上面创建的图像的width / height，使它看起来像一个边界。
  3. 使用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()，我们可以创建纯色边框以及渐变边框。下面是用该方法创建的一些边界示例。

仅在一侧应用边界的示例:

.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>

边界应用在两边的例子:

.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
background-position: left bottom, right top, 4px 0;
  

height: 160px;
width: 160px;
margin: 20px;
}


.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>


<div class="box gradient-border"></div>
</div>

在所有边应用边框的示例:

.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
background-position: left bottom, left bottom, right top, right top, 4px 4px;
  

height: 160px;
width: 160px;
margin: 20px;
}


.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(to right, purple, red),
linear-gradient(to bottom, purple, red),
linear-gradient(to left, purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>


<div class="box gradient-border"></div>
</div>

截图:

输出图像显示半长边框

小开

另一种方法是将边界图像与线性梯度结合使用。

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/

Browser Support: IE: 11+

Chrome: all

Firefox: 15+

For a better support also add vendor prefixes.

caniuse border-image


提交答案