PHP & JavaScript Room :: 設置サンプル

実行結果

ドーナツ
ドーナツ

ソース

<style type="text/css">
#d_borderimagerslice2 div {
    border-image-source:url(/content/img/css/frame.png);
    border-image-slice:12;
    border-image-width:12px;
    border-image-outset:0;
    border-image-repeat:stretch;

    border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
    -webkit-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
    -moz-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
    -ms-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
    -o-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
}
div .pic1 {
    float:left;
    width:320px;
}
div .pic2 {
    width:120px;
    float:right;
}
</style>

<div id="d_borderimagerslice2" class="cf">
    <div class="pic1"><img src="/content/img/pic1.png" alt="ドーナツ" /></div>
    <div class="pic2"><img src="/content/img/pic1-thumb.png" alt="ドーナツ" /></div>
</div>

polarized women