カスタムボーダーhtmlを作成する

Question

私は、.pngを使用してカスタムボーダーでサイズ変更可能なサイドバーを作成しようとしています。 私はボーダーとコーナーの両面のサンプルを持っていますが、私の.pngを両サイドで水平に、垂直にも繰り返す方法はわかりません。

Answer 1

まず、境界を柔軟にすることを前提としています。

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; 
} 

Answer 2

CSS3 border-image

Answer 3

簡単な方法、ちょうどTHIS WEBSITEであなたのイメージをアップロードし、設定した値で与えられたボタン：