我如何改变我的<hr>标签的厚度

我想改变我的水平规则的厚度(<hr>)在CSS。我知道它可以在HTML中这样做

<hr size="10">

但我听说这是不赞成的，在MDN这里提到过。在CSS中，我尝试使用height:1px，但它不会改变厚度。我想要<hr>的线是0.5px厚。

我使用的是Ubuntu上的Firefox 3.6.11

当前回答

由于浏览器实现的差异，<hr />并不适合自定义。

通常使用div会更简单:

等等等等 < span style=" font - family:宋体;"> < / div > 诸如此类

其他回答

高度属性在HTML 5中已弃用。我要做的是在hr周围创建一个边界增加边框的厚度:hr style="border:solid 2px black;"

我正在寻找最短的方法来画一条1px的线，因为分离的CSS的整个负载不是最快或最短的解决方案。

直到HTML5, WAS是1px hr的一种更短的方式:<hr noshade> 但. .<hr>的noshade属性在HTML5中不支持。使用CSS代替。(也没有其他属性之前使用，如大小，宽度，对齐)…

现在，这是相当棘手的，但如果最简单的1px hr需要很好的工作:

变体1，黑色hr:(黑色的最佳解决方案)

<hr style="border-bottom: 0px">

输出:FF, Opera -黑色/ Safari -深灰色

变体2,GRAY hr(最短!):

<hr style="border-top: 0px">

输出:Opera -深灰色/ FF -灰色/ Safari -浅灰色变种3，颜色按需:

<hr style="border: none; border-bottom: 1px solid red;">

输出:Opera / FF / Safari: 1px红色。

我认为样式化<hr>标签的最佳成就如下:

hr {
    color: #ddd;
    background-color: #ddd;
    height: 1px;
    border: none;
    max-width: 100%;
}

对于HTML代码，只需添加:<hr>。

我建议用like结构

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

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

当我做厚的时候，我有一个问题，把颜色变成真正的黑色。所以我把不透明度改为1，问题就解决了:

hr{
    height: 5px;
    background-color: black;
    opacity: 1;
}

推荐文章