0

この質問を参照して: css3 border-image firefox 15.0.1

新しいバージョンの firefox (15.0.1) の問題を解決し、border-image 機能を使用できるようになりました。しかし、新たな問題が発生します。コンテンツが画像で満たされていません。

Firefox の新しいバージョンを除き、すべてのブラウザで背景が境界線の画像で埋められます。

私のクラス：

border-style: solid none solid solid;
border-width: 12px 0 12px 12px;

border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* CSS3 recommendation */
-moz-border-image: url("img/contents-entry.png") 12 0 12 12 stretch stretch; /* old Firefox */
-o-border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* Opera */
-webkit-border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* Safari */

background-color: transparent;

ありがとう

更新: これはhttp://jsfiddle.net/angelcervera/8YWXs/での私のテストです:

div {
border-width:15px;
width:250px;
padding:10px 20px;
background-color: red;
}

#round {
border-style: solid;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") fill 30 30 30 30 stretch;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Firefox */
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Safari */
-o-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Opera */
}

追加した：

  • 背景色: 赤; 白い背景のページを div の背景と区別するために div のスタイルで。
  • 境界線のスタイル: 無地; border-image:url("border.png") fill 30 30 30 30 stretch; #round スタイルで Firefox で動作しますが、塗りつぶされません。
  • 透明のない画像で画像を変更しました。
4

1 に答える 1

1

他の質問で述べたように、次のものが必要です。

border-image: url("img/contents-entry.png") fill 12 0 12 12 stretch;

ボックスの中央領域を塗りつぶしたい場合。http://www.w3.org/TR/css3-background/#border-image-sliceを参照

于 2012-09-14T07:19:47.030 に答える