有办法限制边界长度吗?

Is there any way to limit the length of a border. I have a <div> that has a bottom border, but I want to add a border on the left of the <div> that only stretches half of the way up.

有没有办法限制边界线的长度?我有一个

，它有一个底部边框，但是我想在

的左边添加一个边框，这个边框只向上延伸了一半。

Is there any way to do so without adding extra elements on the page?

有什么方法可以做到不添加额外的元素在页面上?

10 个解决方案

#1

Hope this helps:

希望这有助于:

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

#2

CSS generated content can solve this for you:

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

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

(注:内容:“”;为了使伪元素呈现，声明是必需的。

#3

The :after rocks :)

后:岩石:)

If you play a bit you can even set your resized border element to appear centered or to appear only if there is another element next to it (like in menus). Here is an example with a menu:

如果您播放一点，您甚至可以设置调整大小的边框元素显示为居中，或者仅当它旁边有另一个元素时才显示(如在菜单中)。这里有一个菜单示例:

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

#4

for horizontal lines you can use hr tag:

对于水平线可以使用hr标记:

hr { width: 90%; }

but its not possible to limit border height. only element height.

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

#5

With CSS properties, we can only control the thickness of border; not length.

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

However we can mimic border effect and control its width and height as we want with some other ways.

但是我们可以模仿边框效果，用其他方法控制它的宽度和高度。

With CSS (Linear Gradient):

We can use linear-gradient() to create a background image(s) and control its size and position with CSS so that it looks like a border. As we can apply multiple background images to an element, we can use this feature to create multiple border like images and apply on different sides of element. We can also cover the remaining available area with some solid color, gradient or background image.

我们可以使用linear-gradient()来创建背景图像，并使用CSS控制其大小和位置，使其看起来像边框。因为我们可以对一个元素应用多个背景图像，所以我们可以使用这个特性来创建多个边框，比如图像，并应用到元素的不同侧面。我们也可以用一些纯色、渐变或背景图像来覆盖剩余的可用区域。

Required HTML:

HTML:

All we need is one element only (possibly having some class).

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

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

Steps:

步骤:

1. Create background image(s) with linear-gradient().
2. 使用线性渐变()创建背景图像。
3. Use background-size to adjust the width / height of above created image(s) so that it looks like a border.
4. 使用背景大小来调整上面创建的图像的宽度/高度，使其看起来像一个边框。
5. Use background-position to adjust position (like left, right, left bottom etc.) of the above created border(s).
6. 使用背景位置调整上面创建的边框的位置(如左、右、左下角等)。

Necessary CSS:

必要的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;
}

Examples:

例子:

With linear-gradient() we can create borders of solid color as well as having gradients. Below are some examples of border created with this method.

使用线性渐变()，我们可以创建纯色的边框，也可以创建渐变。下面是一些使用此方法创建的边界示例。

Example with border applied on one side only:

例如，只在一侧应用边框:

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

Example with border applied on two sides:

两边都有边框的例子:

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

Example with border applied on all sides:

边界适用于所有方面的例子:

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

Screenshot:

截图:

#6

Borders are defined per side only, not in fractions of a side. So, no, you can't do that.

边界只定义在每边，而不是在边的部分。不，你不能这么做。

Also, a new element wouldn't be a border either, it would only mimic the behaviour you want - but it would still be an element.

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

#7

This is a CSS trick, not a formal solution. I leave the code with the period black because it helps me position the element. Afterward, color your content (color:white) and (margin-top:-5px or so) to make it as though the period is not there.

这是一个CSS技巧，不是一个正式的解决方案。我将代码的周期为黑色，因为它可以帮助我定位元素。之后，把你的内容(颜色:白色)和(页眉:-5px左右)涂上颜色，让它看起来没有句号。

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

#8

Another solution is you could use a background image to mimic the look of a left border

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

1. Create the border-left style you require as a graphic
2. 创建边框左边的样式作为图形
3. Position it to the very left of your div (make it long enough to handle roughly two text size increases for older browsers)
4. 将其放置在div的最左边(使其足够长，以便在较老的浏览器中处理大约两个文本大小的增加)
5. Set the vertical position 50% from the top of your div.
6. 从您的div顶部设置垂直位置50%。

You might need to tweak for IE (as per usual) but it's worth a shot if that's the design you are going for.

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

• I am generally against using images for something that CSS inherently provides, but sometimes if the design needs it, there's no other way round it.
• 我通常反对将图像用于CSS固有提供的东西，但有时如果设计需要它，就没有其他方法了。

#9

Another way of doing this is using border-image in combination with a 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/

jsfiddle:https://jsfiddle.net/u7zq0amc/1/

---

Browser Support: IE: 11+

浏览器支持:即:11 +

Chrome: all

铬:

Firefox: 15+

Firefox:15 +

For a better support also add vendor prefixes.

要获得更好的支持，还需要添加供应商前缀。

caniuse border-image

caniuse border-image

#10

You can define one border per side only. You would have to add an extra element for that!

您只能在每条边定义一个边框。你需要为它添加一个额外的元素!