Question

我正在尝试使用<hr> html标签测试一个简单的小边框样式。它由垂直和水平线组成。垂直线显示完美，但水平线最后有一条奇怪的曲线，我不知道为什么会发生这种情况。有人知道这个问题吗？

这是我的代码：

 <div style="width:680px; height:540px; position: relative;">   


<hr style="height: 23%; width: 0.01em; position: absolute; left: 35.3%; top: 5.5%;">
    <hr style="height: 18%; width: 0.01em; position: absolute; left: 35.3%; top: 40.5%;">
    <hr style="height: 20%; width: 0.01em; position: absolute; left: 35.3%; top: 70.5%;">




    <hr style="height: 23%; width: 0.01em; position: absolute; left: 65.9%; top: 5.5%;">
    <hr style="height: 18%; width: 0.01em; position: absolute; left: 65.9%; top: 40.5%;">
    <hr style="height: 20%; width: 0.01em; position: absolute; left: 65.9%; top: 70.5%;">




   <hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 34.5%;">
   <hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 34.5%;">
   <hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 34.5%;">



   <hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 64.5%;">
   <hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 64.5%;">
   <hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 64.5%;">  

</div>

这是一个jsfiddle链接：

http://jsfiddle.net/Qc22p/

Answer 1

所以他们这样做。我怀疑它可能是一个CSS“边框样式”或者用于渲染为3D效果的东西......凹槽，脊状或某些东西。

请参阅：http://www.w3schools.com/cssref/pr_border-style.asp

是的，添加border-style:solid;修复了它。

你或许可以找到更漂亮的边框风格。

Answer 2

那是因为你看到了border。摆脱3D边框并为水平线设置border-top，为垂直线设置border-left（例如1px solid black）。

Answer 3

你是说3D风格吗？它是hr元素的浏览器默认样式，要应用你的，你可以使用border: 0;重置默认样式，或者你可以使用border: 1px solid #000来改变它，你可以相应地设置颜色

Demo

<hr /> 1px的水平线不是完全笔直的

3 个答案: