欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-28 20:45:26
...
虽然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;