有什么办法限制边框长度吗?


216

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

有没有办法在页面上不添加额外元素的方法?

Answers:


175

希望这可以帮助:

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


5
这似乎仍然是最好的方法。它与跨浏览器兼容并且易于维护。
Pim Schaaf 2012年

1
有没有办法做到这一点?
www139 2015年

1
将框阴影应用于圆。
Piyush Dholariya'3

3
与古老的浏览器相比,这可能具有少量的跨浏览器兼容性优势,并且更容易通过JS进行控制...但是这些都不是原始问题的关注点。但是,这确实在标记中添加了一个额外的元素,原始问题专门要求避免该标记。所以我不明白为什么这是这个问题的可接受答案。
Spencer O'Reilly,

有这样做:后将不需要任何额外的标记
马克

256

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>

(注意- content: "";为了使伪元素能够呈现,声明是必需的)


21
我认为从语义上讲这是一个更好的选择,因为它不会引入其他div。
Louis Otto

21
这应该是公认的答案,因为它支持CSS作为标记样式的唯一方式。
卢卡斯

4
完善。它也可以按预期与padding和margin一起使用。
Nolonar

4
请记住:您无法通过JS管理伪元素属性(实际上可以,但是会很麻烦)。因此,如果您打算使用此解决方案创建某种进度条-那就算了。选择已经接受的答案。在所有其他情况下,这个答案都更好,是的。
谢尔盖·潘菲洛夫

2
这个跨浏览器和/或JS兼容吗?我喜欢接受的答案,因为@SergeyPanfilov的评论。
matthaeus

36

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


1
您可以添加HTML示例吗?您认为谁将它与表格单元格一起使用,有些线索?
彼得·克劳斯

21

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

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

使用CSS(线性渐变):

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

所需的HTML:

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

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

脚步:

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

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

在两侧应用边框的示例:

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

屏幕截图:

显示一半长度边框的输出图像


14

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

hr { width: 90%; }

但无法限制边框高度。仅元素高度。


是的,这里的“宽度”是“ HR线长度”。对于边框宽度,请使用HR属性size或CSS height。要替换TD标签中的单元格边框,请使用<td>your content<hr/></td>
彼得·克劳斯

8

边框仅在每侧定义,而不是每侧的分数。所以,不,你不能那样做。

同样,新元素也不会成为边框,只会模仿您想要的行为-但它仍然是元素。


7

做到这一点的另一种方法是结合使用边界图像和线性渐变。

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/


浏览器支持:IE:11+

Chrome:全部

Firefox:15岁以上

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

犬的边框图像


5

这是CSS技巧,不是正式的解决方案。我将代码保留为黑色,因为它可以帮助我定位元素。然后,为您的内容上色(color:white)和(margin-top:-5px左右),使其看起来好像没有句点。

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

2

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

  1. 创建图形所需的左边框样式
  2. 将其放在div的最左侧(使其足够长,以应付较旧的浏览器大约增加两个文本大小)
  3. 将垂直位置设置为距div顶部50%。

您可能需要针对IE进行调整(与往常一样),但是如果您要使用的设计是值得的。

  • 我通常反对将图像用于CSS固有提供的功能,但是有时候,如果设计需要它,则没有其他方法可以解决它。

1

您只能在每侧定义一个边框。您将为此添加一个额外的元素!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.