it-swarm-ja.tech

CSSで点線を描く方法は?

CSSで点線を描画するにはどうすればよいですか?

92
Kaveh

例えば:

hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

CSSを使用した<hr>のスタイリング も参照してください。

116
Sinan Ünür
<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />
17
rahul

HTMLの使用:

<div class="horizontal_dotted_line"></div>

そしてstyles.cssで:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
} 
14
Brendan Long

受け入れられた答えには、最新のブラウザにはもう必要のない多くの問題があります。 IE8まで遡って、すべてのブラウザーで次のCSSを個人的にテストしましたが、完全に機能します。

 hr {
    border: none;
    border-top: 1px dotted black;
  }

ブラウザがhrタグに適用するデフォルトの境界線スタイルをすべて削除するには、border: noneを最初に指定する必要があります。

12
CoreDumpError

この行はあなたのために働くはずです:

<hr style="border-top: 2px dotted black"/>
7
user2445044

「border:1px dotted black」のようなものですか?

w3schools.comリファレンス

7
ChssPly76
.myclass {
    border-bottom: thin red dotted;
}
4
Graeme Perrow

ここですべての解決策を試しましたが、きれいな1pxの行はありませんでした。これを実現するには、次の手順を実行します。

border: none; border-top: 1px dotted #000;

代わりに:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

次のように使用します:

<hr style="border-bottom:dotted" />
3
user2444858

これを行うには、次のようにborder-topまたはborder-bottom<hr/>タグに追加するだけです。

<hr style="border-top: 2px dotted navy" />

任意の線種または色で

3
user2445352

点線にする要素に次の属性を追加します。

style="border-bottom: 1px dotted #ff0000;"
3
Sarfraz

hrを使用すると、1本の実線と1本の点線の2本の線が作成されました。

私はこれが非常にうまくいくことを発見しました:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

さらに、幅をパーセンテージにすることができるため、ウィンドウのサイズを変更しても、常にどちらかの側にいくらかのスペースがあります。

2
lachlanjc

破線をお試しください...

<hr style="border-top: 2px dashed black;color:transparent;"/>
1

要素の後の点線:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}
0
Steven Mouret