我正在尝试使用<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链接:
答案 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
来改变它,你可以相应地设置颜色