0

この画像をボタンの境界線で繰り返したいです。全幅の画像ではなく、中央部分のみが表示されるという事実を除いて、正常に機能します。イメージ全体を繰り返すにはどうすればよいですか?

フィドル

私のコード:

#test {
  background-color: #7ab828;
  border: 17px solid transparent;
  -webkit-border-image: url(http://i68.tinypic.com/ofdizn.png) 17 round; /* Safari 3.1-5 */
  -o-border-image: url(http://i68.tinypic.com/ofdizn.png) 17 round; /* Opera 11-12.1 */
  border-image: url(http://i68.tinypic.com/ofdizn.png) 17 round;
  border-top: none;
  border-left: none;
  border-right: none;
}
<div id="test"></div>

編集：

私はそれを行う方法を見つけました（少なくとも私の場合は、私が望んでいた方法で機能しました）。画像を9つの部分にスライスしborder-image-slice、真ん中だけを繰り返すので、同じ部分が3回表示されるように画像を編集しました。これで画像がスライスされ、中央部分は完全な画像のままです。

4

1 に答える 1

1

次の CSS プロパティを参照してください。

ボーダー画像の幅

border-image-widthCSS プロパティは、境界線の端から内側へのオフセットを定義することで、境界線の画像の幅を定義します。border-image-widthが より大きい場合 border-width、ボーダー イメージはパディング (および/またはコンテンツ) の端を超えてはみ出します。

于 2015-12-06T03:39:33.403 に答える