border-image使⽤过程中遇到的⼏个问题
这次年货，为了增添⽓氛，很多地⽅都⽤了边框，由于边框⾼度的不固定，给构建着实带了不⼩的⿇烦。
通常我们处理边框的⽅法，⽆⾮以下两种⽅案：
1.切整张图⽚，做背景。
2.切上中下，进⾏拼接处理。
但是遇到，边框多种样式的时候，我可能就需要⽀招，切得⼿软，为了解决这些问题，我们尝试了border-image。
使⽤border-image，我们⽆⾮弄明⽩以下⼏个属性就能使⽤了：
border-image-source ⽤在边框的图⽚的路径。
border-image-slice 图⽚边框向内偏移。
border-image-width 图⽚边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
但是在使⽤过程中，可能会遇到两个这样的问题：
1.border-image使⽤中会产⽣多余的边框（⼿q中，在⼀些低端的andirod中）。
2.border-image-repeat的属性值，repeat 和 round 如何选择区分。
针对这两个问题，经过⼀些尝试，尝试发现：
1.border-image使⽤中会产⽣多余的边框，是由于边框图⽚边缘没有预留⼀定的空间导致的，这⾥建议预留1px，例图：
htmlborder
边框易产⽣多余的边框（低端机）
边框不会产⽣多余的边框
现象，下⾯同种情况下实现的效果：
这个是w3cschool⾥⾯的例⼦，我加了round，repeat ⽐对：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;  /* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 repeat; /* Old Firefox */
-
webkit-border-image:url(/i/border.png) 30 30 repeat; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 repeat;  /* Opera */
border-image:url(/i/border.png) 30 30 repeat;
}
</style>
</head>
<body>
<div id="round">在这⾥，图⽚铺满整个边框。</div>
<br>
<div id="stretch">在这⾥，图⽚被拉伸以填充该区域。</div>
<p>这是我们使⽤的图⽚：</p>
<img src="/i/border.png">
</body>
</html>
效果：
很显然，repeat出现了，叠加现象，对于我们构建来说，肯定不是特别好的，所以建议⽤round。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。