Border Image

border image

border-image プロパティは、firefox等で、うまく動かない事もあったりして、うまく動かすための記述をメモに残します。

.border09{
 border: 16px solid transparent;
 -moz-border-image: url(https://tenman.info/labo/css/files/border4.png) 30 30 30 30 repeat repeat;
 -webkit-border-image: url(https://tenman.info/labo/css/files/border4.png) 30 30 30 30 fill repeat;
 -o-border-image: url(https://tenman.info/labo/css/files/border4.png) 30 30 30 30 fill repeat;
 border-image: url(https://tenman.info/labo/css/files/border4.png) 30 30 30 30 fill repeat;
 max-width:500px;
 background:url(https://tenman.info/labo/css/files/metal.jpg);
 border-radius: 14px;
 text-align:center;
 font-size:3em;
 color:#fff;
 text-shadow: 1px 4px 6px #000, 0 0 0 #000, 1px 4px 6px #000;
 font-weight:700;
 padding-top:1em;
}

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.


新着記事

コメントは受け付けていません。