2

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

4

3 回答 3

3

所以他们这样做。我怀疑它可能是 CSS“边框样式”或旨在渲染为 3D 效果的东西……凹槽、脊状或类似的东西。

见：http ://www.w3schools.com/cssref/pr_border-style.asp

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

您也许可以找到更漂亮的边框样式。

于 2013-05-15T11:40:13.690 回答
2

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

于 2013-05-15T11:41:21.030 回答
1

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

演示

于 2013-05-15T11:41:19.007 回答