有办法限制边界长度吗?

有没有办法限制边界的长度?我有一个有底部边框的<div>，但我想在<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/

2015-11-25 05:21:02

其他回答

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

然而，我们可以模仿边界效果和控制它的宽度和高度，因为我们想用一些其他的方法。

使用CSS(线性梯度):

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

HTML:

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

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

步骤:

使用linear-gradient()创建背景图像。使用background-size调整上面创建的图像的宽度/高度，使其看起来像一个边框。使用background-position来调整上面创建的边界的位置(如左，右，左底部等)。

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

截图:

2017-02-10 10:43:00

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

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

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

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

2010-11-09 10:00:58

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