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

Question

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

如果没有在页面上添加额外的元素，有没有办法这样做？

Answer 1

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: "";声明是必要的，以便伪元素呈现

Answer 2

希望这会有所帮助：

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

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

Answer 4

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

hr { width: 90%; }

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

Answer 5

  

使用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()，我们可以创建纯色边框以及渐变色。以下是使用此方法创建的边框的一些示例。

仅在一侧应用边框的示例：

＆＃13;
＆＃13;
.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);
}
＆＃13;
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

在两侧应用边框的示例：

＆＃13;
＆＃13;
.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);
}
＆＃13;
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

在所有方面都应用边框的示例：

＆＃13;
＆＃13;
.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);
}
＆＃13;
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

<强>截图：

Answer 6

边界仅在每一侧定义，而不是在一侧的分数中定义。所以，不，你不能这样做。

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

Answer 7

这是一个CSS技巧，而不是正式的解决方案。我将代码保留为黑色，因为它可以帮助我定位元素。然后，为您的内容（颜色：白色）和（margin-top：-5px左右）着色，使其好像时间不存在。

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

Answer 8

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

1. 创建您需要的左边样式作为图形
2. 将其放置在div的最左侧（使其长到足以处理旧浏览器大约两个文本大小的增加）
3. 将垂直位置设置为距离div顶部50％。

你可能需要调整IE（按照惯例），但如果这是你想要的设计，那么值得一试。

• 我一般反对将图像用于CSS本身提供的东西，但有时如果设计需要它，则没有其他方法可以绕过它。

Answer 9

另一种方法是将border-image与线性渐变结合使用。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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

浏览器支持： IE：11 +

Chrome：全部

Firefox：15 +

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

caniuse border-image

Answer 10

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