html - CSSリピート画像

Question

background-image repeatキャップインセットでどのように定義できますか？境界線なしで画像を繰り返してほしい。CSSで中央を繰り返す（並べて表示）または伸ばすことは可能ですか？

最初の（小さい）角の丸い長方形は私のPNG画像です。赤い線は、定義したいキャップインセットを示しています。結果として、後者（大きい方）が表示されます。

Answer 1

CSS3のborder-imageプロパティを確認してください。それはこの種のもののために設計されています。

.box {
  border-image: url(my-image.gif) 20 20 20 20 repeat;
}

ここでインタラクティブなデモ。

IE以外のほとんどのブラウザでサポートされています。

Answer 2

これは、純粋なcss3を使用してこれを解決できるように見えます

.box {
 background: white;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -moz-box-shadow:    inset 0 0 10px #000000;
 -webkit-box-shadow: inset 0 0 10px #000000;
 box-shadow:         inset 0 0 10px #000000;
}