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

実行結果

border-image:url(/content/img/css/border.png) 20 20 round
border-image:url(/content/img/css/border2.png) 20 20 stretch

ソース

<style type="text/css">
#d_borderimage div{
    border-width:15px;
    width:400px;
    margin:10px; padding:15px 25px;
    text-align:center; font-weight:bold; color:#ff6699;
}
#d_borderimage div.sample1 {
    border-image:url(/content/img/css/border.png) 20 20 round;
    -webkit-border-image:url(/content/img/css/border.png) 20 20 round;
    -moz-border-image:url(/content/img/css/border.png) 20 20 round;
    -ms-border-image:url(/content/img/css/border.png) 20 20 round;
    -o-border-image:url(/content/img/css/border.png) 20 20 round;
}
#d_borderimage div.sample2 {
    border-image:url(/content/img/css/border2.png) 20 20 stretch;
    -webkit-border-image:url(/content/img/css/border2.png) 20 20 stretch;
    -moz-border-image:url(/content/img/css/border2.png) 20 20 stretch;
    -ms-border-image:url(/content/img/css/border2.png) 20 20 stretch;
    -o-border-image:url(/content/img/css/border2.png) 20 20 stretch;
}
</style>

<div id="d_borderimage">
    <div class="sample1">border-image:url(/content/img/css/border.png) 20 20 round</div>
    <div class="sample2">border-image:url(/content/img/css/border2.png) 20 20 stretch</div>
</div>

polarized women