2x2ビットマップから境界画像を適切にタイリングするときに問題があります。border-imageビットマップが適切にタイリングされていません
2x2のビットマップ（ 'hr.gif'）は次のようになります。ここでは
は、HTML/CSSです：
<!DOCTYPE html>
<style>
#border {
border: 2px solid;
border-image: url(hr.gif) repeat;
display: table;
}
</style>
<div id="border"><p>The quick brown fox jumps over the lazy dog</p></div>
これは国境はページ上のようになります。
そして、これは私が見て国境をご希望の方法です：
編集：JSFIDDLE
はそれを考え出しました。ボーダーギャップを埋めるために6x6ビットマップを使用しなければなりませんでした。以下の解決策。タイルは幅がさえない場合は切り捨てられてエッジが、完璧ではないに気づく（ここでは次のようになります
<!DOCTYPE html>
<style>
#border {
display: table;
border-image: url("data:image/gif;base64,R0lGODlhBgAGAKECAAAAAP///6Ag8KAg8CH5BAEKAAIALAAAAAAGAAYAAAILRGynYCIJ3EFqnQIAOw==") 2 space;
border-width: 2px;
border-style: solid;
}
</style>
<div id="border"><p>The quick brown fox jumps over the lazy dog</p></div>
、私はそれの解が存在するとは思わない、：ここで新しいビットマップですしかし、それは無視できる問題です）：
実稼働環境では、上記のbase64の使用をお勧めしますビットマップのテキスト表現は.gifファイルのサイズの2倍以上です（それぞれ58バイト対〜102バイト） –
ボーダースタイルのプロパティで試してみる必要がありますか？ ？ （私はW3Cからそれを使用するので、私はあなたの画像を取得することはできません）
border-image: url(hr.gif) 10 round;
と数字と遊ぶ：
'border-image'プロパティの有無にかかわらず、' border：2px dotted; 'を使ってみました。前者は私に醜い4ピクセル幅のボックス（https://i.imgur.com/3EvS3P1.gif）を与えますが、後者は元の投稿と同じ問題に悩まされています。 –
はにトップチェンジ境界画像構文を試してみてください。
結果：
<!DOCTYPE html>
<style>
#border {
border: 2px solid;
border-image: url(hr.gif) 10 round;
}
</style>
<div id="border"><p>The quick brown fox jumps over the lazy dog</p></div>
申し訳ありませんが、私はイメージが非常に小さいことを理解しています。ここにあります： https://i.stack.imgur.com/IiHGq.gif 上記の例の数字で遊んでも効果はありません –
わかりません - DIVタグとPタグはどちらもブロックレベルの要素なので、テキストをラップする必要がある場合は、「
The quick brown fox jumps over the lazy dog
質問が不明な場合はお詫び申し上げます。私は「テキストをラップしません」と思います。カスタムビットマップ.gifをdの繰り返し画像iv境界。上のコード例は私に最初のイメージを与えます。私は国境を2番目のイメージ（モックアップ）のように見せたいと思います。 –
私が見る限り、このダッシュを繰り返すことは不可能です。ただし、境界線のテクスチャで四角形を作成して使用することもできます。いくつかの例がありますhttps://css-tricks.com/almanac/properties/b/border-image/ – Sergey