css3 border image

私はそれぞれ20pxずつ20pxの4つの別々の画像を持っています。各画像をそれぞれの境界面に表示したいと思います。任意のコードスニペット？私のターゲットプラットフォームはFF 3.6+とSafari 5+です。css3 border image

css3とhtml5を使用します。

2011-06-18 coure2011

あなたは使用することができます。

/* Shorthand */ 
border-image:url('top.png') url('right.png') url('bottom.png') url('left.png');

それとも長い道のりを：border-image属性に複数の画像を使用することはできていないようだ

/* Long way */ 
border-top-image:url('...'); 
border-right-image:url('...'); 
border-bottom-image:url('...'); 
border-left-image:url('...');

2011-06-18 06:28:45 foxy

それはFFのいずれかの境界線を表示しません、私はuが-mozのような接頭辞が必要だと思うが、私はhttp://jsfiddle.net/sT9dH/それをチェックし、plzはそれ – coure2011

何であるかわかりません、接頭辞は-mozです。 – coure2011

はいを修正正しい構文 – Duopixel

。

ただし、border-imageを使用することはできますが、4面すべてを1つにまとめて画像を作成するだけで済みます。ここでの例で

border-imageは、それが使用する画像のスライスべきかくらい、画像のURLを取り、その後、4つのサイズ。最初の値は左上隅に使用され、2番目の値は右上隅に使用されます。

border-image: url("border.png") 20 20 20 20 repeat;

を使用するように、DIVの左上のため左上20×20画素のチョップDIVの右上ためDET右上20×20とします。

2011-06-18 07:33:14

答えて