CSS3边框图片-像素虚边的问题

虽然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;

转载于:https://www.cnblogs.com/gulei/p/5283785.html

CSS3边框图片-像素虚边的问题相关推荐

html图片边框模糊,CSS3边框图片-像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解边框些是些如例回能泉配幻 ...
29.CSS3边框图片效果
第二十三章 CSS边框图片效果一.属性解释用几个属性就可以嵌入图片形式的边框. 1.border-image-source : 引入背景图片地址 2.border-image-slice : ...
CSS3边框图片、边框阴影、文本阴影
边框图片border-image 其有五个属性: border-image-source:边框图片的路径 border-image-slice:图片边框向内偏移 border-image-width: ...
html为荣围绕图片,CSS3实现图片围绕DIV元素的边框效果
本篇文章介绍CSS3实现用图片围绕DIV边框的效果,使用的时候注意浏览器兼容情况,希望对你有所帮助. 浏览器支持: Internet Explorer 11, Firefox, Opera 15, C ...
第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
好程序员web前端分享CSS3边框
好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. 在本章中,您将学到以下边框属性: b ...
CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性--Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
获取图片像素颜色,转换为CSS3 box-shadow显示
原理: 1.使用FileReader 读取图片 2.使用canvas 的 getImageData 获取图片像素信息 3.将像素信息转换为CSS3 box-shadow 代码: <!DOCTYP ...
html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...

CSS3边框图片-像素虚边的问题

CSS3边框图片-像素虚边的问题相关推荐

最新文章

热门文章