CSS：设置边框宽度的一半
考虑以下几点：CSS：设置边框宽度的一半
<div class="box">
...
</div>
.box{
width:500px;
border-bottom: 1px solid #ccc;
}
它将把盒子的全宽的底部边框（500像素）。 但不是设置边框底部的整个宽度，我想设置300像素，在盒底的中间，我应该怎么做..
你可以在箱子底部扔<hr>吗？
<div class="box">
...
<hr>
</div>
.box{
width:500px;
}
.box hr{
width: 300px;
border-bottom: 1px solid #ccc;
}
你可以这样做：
.box {
position: relative;
width: 500px;
}
.border {
position: aboslute;
background: #ccc;
left: 100px;
bottom: 0;
width: 300px;
height: 1px;
}<div class="box">
<div class="border">
</div>
</div>但是有无限的可能性。有些比其他语义更正确;这个解决方案只是一个快速修复。
你可以使用一个背景图像：
.box{
width:500px;
border-bottom: 1px solid #ccc;
background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
background-position: bottom left;
background-repeat:no-repeat;
}
是的！你也可以使用CSS Gradients在CSS中生成图像，如果它是简单的渐变或纯色：'background-image：linear-gradient（black，black）; background-size：50％1px;背景位置：50％100％'。 – 2016-05-09 09:38:43
我建议做这样的事情，效果很好在Firefox
<style type="text/css">
.box{
width: 500px;
height: 20px;
}
.boxHalfWidth{
width: 250px;
height: 1px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box">
some data
<div class="boxHalfWidth"></div>
</div>
</body>
不必要地使用额外的HTML元素。 – 2016-05-09 09:40:46
可以使用::之后或::之前的伪选择器。 像：
<div> something here </div>
CSS：
div {
width: 500px;
height: 100px;
position: relative;
padding-top: 20px;
margin-top: 50px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50%;
left: 25%;
border-top: 1px solid red;
}
这里是jsfiddle
可你把心''
在你的对话框的底部？然后，您可以根据需要设计它的样式。 – 2012-01-10 18:05:30
实际上，填充是用来控制它的。 – noob 2012-01-10 18:10:53
@micha也将填充“盒子”内的内容 – 2012-01-10 18:13:56