【SP限定】border-imageでいろんなワクをつくろう。

PCでは対応状況が悪いので使い物にならないが、
スマホでのコーディングでは有力かもしれない。
アンドロイドでの、特殊枠画像で、画像がずれたりしないのだ!!

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

div{
	border-style: solid;
	border-width: 30px 25px 20px 25px;
	-moz-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-webkit-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-o-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	border-image: url(../img/bg_form.png) 30 25 20 25 fill stretch round;
}

下記の解説とジェネレータが秀逸。

http://www.htmq.com/css3/border-image.shtml
http://border-image.com/

投稿者:

ayako0802

フロントエンドエンジニア