●HTML
- <div id=”main_visual”>
- <p>これは、レイアウト P タグのコンテンツです</p>
- </div>
●CSS
#main_visual{#main_visual{ width: 1100px; height: 500px; margin: 222px auto 102px; background-color:#92F78A; box-sizing: border-box; border:10px solid #D82023; border-image-source:url(../image/line_026.png); border-image-slice:10%; border-image-width: auto; border-image-outset:30px; }
/*使用画像はボックスサイズと同じ画像にし内側にボーダー画像を作る。ここでは1100px/500pxで合している。*//* border-image-slice=ボーダーに使用する画像の分割位置を指定する。今のところ％で指定しないとうまくいかない。*//* border-image-width=ボーダー画像の幅を指定。オートにするとsliceと同じ値になる。*//* border-image-outset=ボーター画像の領域を広げる。数値が大きくなるほどボーダー画像が外側へいく*/