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

时间:2013-05-15 11:37:24

标签: html

我正在尝试使用<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/

3 个答案:

答案 0 :(得分:3)

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

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

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

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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

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

Demo