CSS 有什么方法可以限制边框长度？

Question

提问by mcbeav

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.

有没有办法限制边框的长度。我有一个<div>底部边框，但我想在左侧添加一个<div>仅向上延伸一半的边框。

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

有没有办法在页面上不添加额外元素的情况下做到这一点？

Answer 1

采纳答案by sObr

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>

Answer 2

回答by TrevC

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

<div>Lorem Ipsum</div>

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

（注意 -content: "";声明是必要的，以便伪元素呈现）

Answer 3

回答by user2397120

The :afterrocks :)

该:after岩石:)

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>

Answer 4

回答by Mohammad Usman

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

通过CSS属性，我们只能控制边框的粗细；不是长度。

However we can mimic border effect and control its widthand heightas we want with some other ways.

然而，我们可以模仿边界效应并控制其width和height为我们与其他一些方面想。

With CSS (Linear Gradient):

使用 CSS（线性渐变）：

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:

脚步：

Create background image(s) with linear-gradient().
Use background-sizeto adjust the width/ heightof above created image(s) so that it looks like a border.
Use background-positionto adjust position (like left, right, left bottometc.) of the above created border(s).

使用linear-gradient().创建背景图像。
使用background-size调整width/height上面创建的图像（S），使得它看起来像一个边界。
利用background-position调整位置（如left，right，left bottom将上面创建的边界（或多个）等）。

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.

使用linear-gradient()我们可以创建纯色边框以及渐变。以下是使用此方法创建的边框的一些示例。

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:

截屏：

Answer 5

回答by Edmhs

for horizontal lines you can use hr tag:

对于水平线，您可以使用 hr 标签：

hr { width: 90%; }

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

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

Answer 6

回答by Ben

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.

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

Answer 7

回答by Daniel Z.

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+

浏览器支持：IE：11+

Chrome: all

铬：全部

Firefox: 15+

火狐：15+

For a better support also add vendor prefixes.

为了获得更好的支持，还可以添加供应商前缀。

caniuse border-image

caniuse 边框图像

Answer 8

回答by Justin Munce

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

Answer 9

回答by Kevin

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

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

Create the border-left style you require as a graphic
Position it to the very left of your div (make it long enough to handle roughly two text size increases for older browsers)
Set the vertical position 50% from the top of your div.

创建您需要的左边框样式作为图形
将它放在 div 的最左侧（使其足够长以处理旧浏览器大约两个文本大小的增加）
将垂直位置设置为距 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 固有提供的内容，但有时如果设计需要它，则别无他法。

Answer 10

回答by Simon

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

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

CSS 有什么方法可以限制边框长度？

提问by mcbeav

采纳答案by sObr

回答by TrevC

回答by user2397120

回答by Mohammad Usman

With CSS (Linear Gradient):

使用 CSS（线性渐变）：

回答by Edmhs

回答by Ben

回答by Daniel Z.

回答by Justin Munce

回答by Kevin

回答by Simon

相关推荐

最近更新

标签

CSS 有什么方法可以限制边框长度？

提问by mcbeav

采纳答案by sObr

回答by TrevC

回答by user2397120

回答by Mohammad Usman

With CSS (Linear Gradient):

使用 CSS（线性渐变）：

回答by Edmhs

回答by Ben

回答by Daniel Z.

回答by Justin Munce

回答by Kevin

回答by Simon

相关推荐

你能在 CSS 中设置边框不透明度吗？

带有偏移量的 CSS 背景渐变

CSS Div 在一行

CSS last-child 和 last-of-type 在 SASS 中不起作用

相关推荐

最近更新

标签