html - WebKitブラウザで丸いドットで点線の境界線を作成するにはどうすればよいですか？

Question

Safari、ChromeなどのWebKit駆動型ブラウザーでは、スタイルdottedが丸ではなく四角いドットでレンダリングされると宣言された境界線が表示されます。

ブラウザ間でシームレスに丸いドットのレンダリングを強制する方法はありますか？

参照テスト

• jsFiddleで

Answer 1

仕様ではこれらのプロパティを明示的に定義しておらず、ブラウザーの実装に任せているため、ネイティブでサポートされているソリューションは現在不足しています。

ただし、SVG を使用して境界線を作成することもできます。SVG を使用すると、目的の特性を完全に制御できます。

目的の効果を得るために、線を描画し、その線stroke-dasharrayと属性を定義します。stroke-linecap

サンプル コード スニペット

<line 
    x1="40" x2="260" 
    y1="100" y2="100" 
    stroke="#5184AF" 
    stroke-width="20" 
    stroke-linecap="round" 
    stroke-dasharray=".001, 30" />

結果のスナップショット

デモ

• http://jsfiddle.net/eliranmal/hsfxS/

参考文献 (Mozilla Developer Network)

• stroke-dasharray
• stroke-linecap

Answer 2

私もこの問題を抱えていましたが、メニュー項目の下に 3 つの丸い点だけが必要でした。だから私はちょうどひどいハックを使用しましたが、うまくいきました: まず、 @import を使用して FontAwesome にフックし、CSS のコンテンツとして丸いドット文字を追加しました:

#nav ul .current_page_item a:after {
    font-family: 'FontAwesome';
    content: "\f111  \f111  \f111";
    font-size: 6px;
    display: block;
}

Answer 3

border-image可能性があります：http://www.css3.info/preview/border-image/

Answer 4

ozbassplayer のソリューションに基づいています (ありがとうございます)。

sassで使用して、ドットを数えなくても長い行を生成する方法。

唯一の欠点は、線が「理想的に」長くない場合のドットの切断です。

  &:after {
    font-family: 'FontAwesome';  
    display: block;  
    font-size: 6px;  

  
    letter-spacing: 3px;      // to adjust space between dots
    white-space: nowrap;      // force to keep in one line  
    overflow: hidden;         // avoid rendering dots out of container
    width: 100%;

    $content: ' ';
    @for $i from 1 through 50 {
      $content: $content + " \f111";
    }

    content: $content;
  }