CSS：将边框设置为一半宽度 | 将边框设置为一半宽度

本文介绍了CSS：将边框设置为一半宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请考虑以下内容：

 < div class =box> 
 ... 
< / div> 
 
 .box {
 width：500px; 
 border-bottom：1px solid #ccc; 
}

它将设置框全宽的底部边框（500px）。
但是不是将边框底部设置为整个宽度，我想设置300px，在框底部的中间，我应该怎么做。

$ <$>

b $ b

 < div class =box> 
 ... 
< hr> 
< / box> 
 
 .box {
 width：500px; 
} 
 
 .box hr {
 width：300px; 
 border-bottom：1px solid #ccc; 
}

Consider following:

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

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

It will set the bottom border of full width of the box (500px).But instead of setting the border bottom to whole width, I'd like to set 300px, in the middle of the box bottom, how should I do that..

解决方案

Can you throw an <hr> at the bottom of your box?

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

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

http://jsfiddle.net/MuAKF/

这篇关于CSS：将边框设置为一半宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！