border-image小记

• 2019-04-08
  之前一直想使用border-image做边框上的适配，记录一下遇到的问题

根据w3school的实例，添加CSS样式：

div{
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
	border-image:url(border.png) 30 30 round;
}

然后我在这里就怎么都做不下去了，找了半天发现最最重要的基础的border样式没有设置（我这个笨猪）：

div{
	border:15px solid transparent;
}

然后根据自己需要调整一下样式

div{
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	border: 14px solid transparent;
	color: #d5ecf7;
	-moz-border-image: url(../img/border.png) 20 20 stretch; /* Old Firefox */
	-webkit-border-image: url(../img/border.png) 20 20 stretch;  /* Safari and Chrome */
	-o-border-image: url(../img/border.png) 20 20 stretch;   /* Opera */
	border-image: url(../img/border.png) 20 20 stretch;
}

最终效果：