ritina视网膜屏中CSS3边框图片像素虚边的问题_html/css_WEB-ITnose

虽然CSS3新增了这个功能，但是在W3school里面并没有给出具体详细的解释，还好网上不乏大神给你我们很全面的解释其中的原理-css3：border-image边框图像详解

边框图片的原理是四个角不变，边拉伸或平铺，border-image-slice:27 27 27 27（可以缩写，同内外边距），距离各边向内偏移的距离后切割

 

按照此方法需要进行自己的borderimg的制作（类似于sprite）

（21+1+21）

如上，一个像素边框在PC端显示没有任何问题，但是按照 走向视网膜（Retina）的Web时代 中对一个像素在ritina中的解释，会分为四个设备像素来显示，所以产生一模糊虚边，导致内部产生了一个虚框，如图上

代码为border:solid 21px transparent; border-image:url("corner.png") 21 round;

为了解决这个问题，需要对原始图片做一些处理，四边各留出一个像素的空白，如图下

（[1+21]+1+[21+1]）

代码为border:solid 22px transparent; border-image:url("corner2.png") 22 round;