私は、.pngを使用してカスタムボーダーでサイズ変更可能なサイドバーを作成しようとしています。 私はボーダーとコーナーの両面のサンプルを持っていますが、私の.pngを両サイドで水平に、垂直にも繰り返す方法はわかりません。カスタムボーダーhtmlを作成する
-1
A
答えて
3
まず、境界を柔軟にすることを前提としています。
CSS3(IE9などの最新のブラウザ)では、複数の背景を使用できます(たとえば、http://jsfiddle.net/RCHtK/を参照)。 http://jsfiddle.net/RCHtK/10/:この例を参照してください以前のIEブラウザで
.fancyBorder {
padding: 15px; /* this should probably be set at least to the width of your border image */
background:
url(topleftimage.png) top left no-repeat,
url(toprightimage.png) top right no-repeat,
url(bottomleftimage.png) bottom left no-repeat,
url(bottomrightimage.png) bottom right no-repeat,
url(top.png) top left repeat-x,
url(bottom.png) bottom left repeat-x,
url(left.png) top left repeat-y,
url(right.png) top right repeat-y;
}
:div
(のようなfancyBorder
)と、このCSSのようなものにクラスを置きます。これはIE7と8でテストされています(IE6で動作するはずです)。 IE8をサポートしたいだけの場合は、擬似要素を独創的に使用してコードを最小限に抑えることができます。ご覧のとおり、意味のない多数の要素が必要です。関連するコードここにある:画像によって境界線を作成するための
HTML
<div class="fancyBorder">
<div class="fbInner">
<div class="fbContent">
Here is some sample text. <br />
Here is some sample text. <br />
Here is some sample text. <br />
</div>
<div class="top"></div>
<div class="bottom"></div>
<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>
</div>
</div>
CSS
.fancyBorder {
/* left side */
background: url(leftimg.png) top left repeat-y;
}
.fbInner .fbContent {
position: relative;
z-index: 2;
}
.fbInner {
padding: 15px; /* this should probably be set at least to the width of your border image */
position: relative;
/* right side */
background:url(rightimage.png) top right repeat-y;
}
.fbInner div {
position: absolute;
z-index: 0;
}
.fbInner .top {
top: 0;
left: 0;
height: 15px;
width: 100%;
background: url(topimage.png) top left repeat-x;
}
.fbInner .bottom {
height: 15px;
width: 100%;
bottom: 0;
left: 0;
background: url(bottomimage.png) bottom left repeat-x;
}
.fbInner .corner {
z-index: 1;
width: 15px;
height: 15px;
}
.fbInner .tl {
top: 0;
left: 0;
background: url(topleftimage.png) top left no-repeat;
}
.fbInner .tr {
top: 0;
right: 0;
background: url(toprightimage.png) top right no-repeat
}
.fbInner .bl {
bottom: 0;
left: 0;
background: url(bottomleftimage.png) bottom left no-repeat;
}
.fbInner .br {
bottom: 0;
right: 0;
background: url(bottomrightimage.png) bottom right no-repeat;
}
2
CSS3 border-image
1
簡単な方法、ちょうどTHIS WEBSITEであなたのイメージをアップロードし、設定した値で与えられたボタン:
関連する問題
- 1. uitextfieldのカスタムボーダー
- 2. UIViewの周りにカスタムボーダーを作成するにはどうすればよいですか?
- 3. HTMLでヘルプファイルを作成する
- 4. Outlook 2013でHTMLメールを作成する
- 5. .docからHTMLフォームを作成する
- 6. HTMLバックリンクを作成するには?
- 7. Html縦列のテーブルを作成する
- 8. カスタムHTMLタグを作成する
- 9. HTMLからWPテンプレートを作成する
- 10. htmlのフォームを作成する
- 11. イメージをHTMLから作成する
- 12. オブジェクトのhtmlテンプレートを作成する
- 13. テンプレートをHTMLで作成するベストプラクティス
- 14. htmlでデータテンプレートを作成する方法
- 15. htmlページからcsvを作成する
- 16. htmlフォームキャプチャデータ作成URL
- 17. カルマでHTMLテストレポートを作成
- 18. カスタムHTML選択を作成
- 19. 動的に成長するテーブルをHTMLで作成する
- 20. Struts html taglibで動的htmlテーブルを作成する
- 21. HTMLとCSSで複合体を作成するグリッド構造を作成する
- 22. バッチファイルでGIFを表示するHTMLページを作成する
- 23. オーバーラップするFlashの下にHTMLを作成する方法
- 24. HTMLファイルを作成せずにHTML文字列を印刷する
- 25. HTMLタグから有効なHTMLを作成するSQLを使用
- 26. javascript配列からHTMLテーブルを作成
- 27. 作成後にhtml要素を取得
- 28. xmlファイルからhtmlページを作成
- 29. 空のHTMLスペースをオンザフライで作成Javascript
- 30. C#でdynaimcコントロールを作成し、HTML
私は 'border-image' prの考えが好きです(IE9のサポートが不足している、IE9の欠如)、複数のバックグラウンドソリューションよりも私にはあまり望ましくありません。しかし、それは確かにボスニアのニーズに対応できるオプションです。 – ScottS
もし私が選んだのであれば、 'border-image'を使ってプログレッシブエンハンスと呼んで7つのhttp要求を保存したいと思います。しかし、私はあなたのソリューションが非常に興味深いと感じました! – bookcasey
いくつかの画像をスプライトにまとめると、4つのコーナーを1つの画像に入れ、繰り返された画像を1または2に入れ、設定を変更することで、HTTPリクエストを2または3に減らすことができますバックグラウンドの位置。 – ScottS