In Case of Stairsの Webサイトでは、ボーダーイメージ用のオンラインコードジェネレーターが提供されています。 読み込まれた画像に基づいて、 border-imageプロパティのプレビューとCCS3が異なるパラメーターで作成されます。 インデントとサイズを「オンザフライ」で視覚的に選択できます。
境界線画像について知らない人のために、jQueryの作成者であるJohn Resigのすばらしい記事を読むことをお勧めします。
以下は、このサービスによって生成されたCSSプロパティを使用するデモのコードです
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Border-image </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< style >
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</ style >
</ head >
< body >
< div id ="bb" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </ p >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Border-image </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< style >
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</ style >
</ head >
< body >
< div id ="bb" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </ p >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Border-image </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< style >
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</ style >
</ head >
< body >
< div id ="bb" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </ p >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
ここで何が起こったかを見ることができます。
ここに別の例があります
残念なことに、プレビューが表示される背景と表示されるコードの色を変更できないのは残念です。
ChromeのOpera 10.5のFireFox 3.6で正常に動作します。 IEでは動作しません