边框长度小于div宽度?

我有以下代码

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

DEMO

div的宽度是200px,所以border-bottom也是200px,但是如果我只想在border-bottom只有100px而不改变div的宽度,我应该怎么做?

你可以使用伪元素。 例如

 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> 

另一种做法是(在现代浏览器中)使用负面的传播框阴影。 看看这个更新的小提琴: 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> 

你不能有一个不同的尺寸的边界比div本身。

解决方法是在neath,居中或绝对定位下,只添加另一个div,所需的1像素边框和1pixel的高度。

http://jsfiddle.net/WuZat/3/

我留下了原来的边框,以便您可以看到宽度,并有两个示例 – 一个宽度为100,另一个宽度为100。 删除你不想使用的那个。

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

边框被赋予整个html元素。 如果你想要一半的底部边框,你可以用一些其他可识别的区块如span来包裹它。

HTML代码:

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

CSS如下:

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

我刚刚完成了相反的使用:after::after因为我需要使我的底部边界完全1.3rem

我的元素在使用时变得超级变形:before:after :因为元素与display: flex水平alignmentdisplay: flexflex-direction: rowalign-items: center

你可以用这个来扩大或缩小范围,或者可能是任何math维度的mod:

 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,然后用一些正常值更改variables。

  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%"> 

这将创build一个宽度为50%的水平线,如果您想编辑样式,则需要创build/修改该类。

对于晚会,但对于任何想要制作2个边框的人(在我的情况下,在底部和右边),可以使用接受的答案中的技巧,并在第二行的psuedo-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; }