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 に答える