任何方式来限制边界的长度?

有什么办法来限制边界的长度。 我有一个具有底部边框的<div> ,但是我想在<div>的左边添加一个只能延伸一半的边框。

有没有办法做到这一点,而无需在页面上添加额外的元素?

希望这可以帮助:

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

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

:after岩石:)

如果你玩了一下,你甚至可以设置你resize的边框元素显示居中,或只有当旁边有另一个元素(如菜单)时出现。 这里是一个菜单的例子:

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

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

 hr { width: 90%; } 

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

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

但是,我们可以模仿边界效应,并以其他方式控制其widthheight

使用CSS(线性渐变):

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

必需的HTML:

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

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

脚步:

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

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

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

边界仅限于每边,而不是边的分数。 所以,不,你不能这样做。

而且,一个新的元素也不会是一个边界,它只会模仿你想要的行为 – 但它仍然是一个元素。

这是一个CSS技巧,而不是一个正式的解决scheme。 我把代码保留为黑色,因为它帮助我定位元素。 之后,将您的内容(颜色:白色)和(margin-top:-5px左右)颜色化,以使该时段不存在。

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

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

  1. 创build所需的边框左侧样式作为graphics
  2. 将其放在div的最左侧(使其足够长,以便处理旧版浏览器的两个文本大小)
  3. 从你的div的顶部设置垂直位置50%。

您可能需要调整IE浏览器(按照惯例),但如果这是您要devise的devise,那么值得一试。

  • 我通常反对使用图像的CSS本质上提供的东西,但有时如果devise需要它,没有其他方式。

您只能在每面定义一个边框。 你将不得不添加一个额外的元素!

另一种做法是将边界图像与线性渐变结合使用。

 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>