边界长度小于分割宽度？

不能有与 div 本身不同大小的边框。

解决方案是在下面添加另一个 div，居中或绝对定位，使用所需的1像素边框和只有1像素高度。

Http://jsfiddle.net/wuzat/3/

我保留了原始边框，这样您就可以看到宽度，并且有两个示例——一个宽度为100，另一个宽度为100居中。删除您不希望使用的。

给出了整个 html 元素的边界。如果您想要半底边框，您可以包装它与其他可识别块，如跨度。

HTML 代码:

<div> <span>content here </span></div>

CSS 如下:

 div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}

你可以使用伪元素。

div {
width   : 200px;
height  : 50px;
position: relative;
z-index : 1;
background: #eee;
}


div:before {
content : "";
position: absolute;
left    : 0;
bottom  : 0;
height  : 1px;
width   : 50%;  /* or 100px */
border-bottom:1px solid magenta;
}

<div>Item 1</div>
<div>Item 2</div>

IE8也支持. : after 不需要为表示目的使用额外的标记。

编辑:

如果需要右对齐的边框，只需将 left: 0更改为 right: 0

如果需要中心对齐的边框，只需设置 left: 50px;

另一种方法(在现代浏览器中)是使用负扩展框阴影。看看这个更新的小提琴: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

我认为最安全和最兼容的方法是上面的可接受的答案，只是想分享另一个技巧。

你可以使用线性渐变:

div {
width:100px;
height:50px;
display:block;
background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
background-position: bottom;
background-size: 100% 25px;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-top: 1px solid red;
}

<div></div>

我像这样在 h3标签下添加了一行

    <h3 class="home_title">Your title here</h3>

    .home_title{
display:block;
}
.home_title::after {
display:block;
clear:both;
content : "";
position: relative;
left    : 0;
bottom  : 0;
max-width:250px;
height  : 1px;
width   : 50%;  /* or 100px */
border-bottom:1px solid #e2000f;
margin:0 auto;
padding:4px 0px;
}

div{
font-size: 25px;
line-height: 27px;
display:inline-block;
width:200px;
text-align:center;
}


div::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin-top: 15px;
width: 100px;
margin:auto;
}

这将有所帮助:

Http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%">

这将创建一条宽度为50% 的水平线，如果要编辑样式，则需要创建/修改类。

派对已经迟到了，但是对于任何想要制作2个边框(在我的例子中是底部和右边)的人来说，你可以在已接受的答案中使用这个技巧，在第二行的 suedo-element 后面添加一个: 然后像这样改变属性: Http://jsfiddle.net/oeal9fsm/

div
{
width:500px;
height:500px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left    : 25%;
bottom  : 0;
height  : 1px;
width   : 50%;
border-bottom:1px solid magenta;
}
div:after {
content : "";
position: absolute;
right    : 0;
bottom  : 25%;
height  : 50%;
width   : 1px;
border-right:1px solid magenta;
}

我只是用 :after和 ::after完成了相反的工作，因为我需要让我的底部边界完全 1.3rem更宽:

当我同时使用 :before和 :after时，我的元素变得超级畸形，因为元素与 display: flex、 flex-direction: row和 align-items: center水平对齐。

你可以用它来做一些更宽或更窄的东西，或者可能是任何数学维度模型:

a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem;      // margin and height should
height: 0.4rem;          // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem;      // margin and height should
height: 0.4rem;          // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}

对不起，这是 SCSS，只要把数字乘以10，然后用一些正常值改变变量。

我有情况下有一些底部边界之间的图片在 div 容器和最好的一行代码是-边底式: 插图;

我在我的项目中做过类似的事情。我想在这里分享。您可以添加另一个 div 作为子元素，给它一个小宽度的边框，并将其放置在通常的 CSS 的左边、中间或右边

HTML 代码:

    <div>
content
<div class ="ac-brdr"></div>
</div>

CSS 如下:

   .active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}

右边框长度小于父 div 具有伪元素

@import url(https://fonts.googleapis.com/css?family=Raleway);


body{
font-family: 'Raleway', sans-serif;
}


 

div {
width   : 200px;
height  : 50px;
position: relative;
z-index : 1;
background-color: #f5f5f5;
margin: 20px auto;
padding: 20px;
color:#726E97;
}


div:before {
content : "";
position: absolute;
right    : 0;
top     : 25%;
height  : 50px;
width   : 50%;
border-right:5px solid #726E97;
}

<div>BOX 1</div>