CSS：设置边框宽度的一半

考虑以下几点：CSS：设置边框宽度的一半

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

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

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

来源

2012-01-10 user1117313

可你把心''

在你的对话框的底部？然后，您可以根据需要设计它的样式。 – 2012-01-10 18:05:30

实际上，填充是用来控制它的。 – noob 2012-01-10 18:10:53

@micha也将填充“盒子”内的内容 – 2012-01-10 18:13:56

你可以在箱子底部扔<hr>吗？

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

.box{ 
    width:500px; 
} 

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

http://jsfiddle.net/MuAKF/

来源

2012-01-10 18:07:57

你可以这样做：

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

但是有无限的可能性。有些比其他语义更正确;这个解决方案只是一个快速修复。

来源

2012-01-10 18:05:55 wanovak

你可以使用一个背景图像：

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

来源

2012-01-10 18:08:02

是的！你也可以使用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>

来源

2012-01-10 18:10:53 redDevil

不必要地使用额外的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

来源

2014-06-04 08:05:33

这是答案 – 2017-05-25 16:35:41

您可以对垂直边框使用相同的解决方案。 – titusfx 2017-10-03 11:20:07

这里有个问题，我可以以任何方式使用**内容**部分来绘制边框吗？没有使用** border **属性？就是想 – Joey 2017-11-23 04:19:19

CSS：设置边框宽度的一半

回答

相关问题