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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏瞎说开发那些事

使用RPA绘制素描图

1716
来自专栏数据小魔方

think-cell chart系列15——蝴蝶图

今天跟大家分享think-cell chart系列的第15篇——蝴蝶图。 ? 当然think-cell chart中是无法直接制作蝴蝶图的,需要通过一对开口方向...

3904
来自专栏数据小魔方

背景填充式条形图、柱图

今天跟大家分享背景填充式条形图、柱图的制作技巧! ▽▼▽ 本例要介绍的填充式图表与之前推送的一篇温度计风格图表的制作方式有点儿类似,不过制作方法上有些不同,在这...

2685
来自专栏数据小魔方

带负值的图表标签处理方法

今天跟大家分享带负值的图表标签处理方法! ▽▼▽ 在遇到某些特殊图表时,特别是一个数据系列中既有正值又有负值的情况,数据标签以及纵轴轴标签总是会相互遮挡,做出来...

3126
来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

911
来自专栏数据小魔方

think-cell chart系列18——复合图表与次坐标轴

今天跟大家分享的是think-cell chart系列的第18篇——复合图表与次坐标轴。 今天要跟大家讲解如何在think-cell chart中开启次坐标轴,...

7057
来自专栏进步博客

[译]响应式图像

自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在...

862
来自专栏腾讯社交用户体验设计

[ISUX译]响应式图像 - 腾讯ISUX

841
来自专栏理论坞

【教程】复古电影海报效果设计

2、新建一个图层命名cloud,用吸管工具吸取人像上最暗地方的颜色,选择滤镜—渲染—云彩,如下。

532
来自专栏IMWeb前端团队

利用canvas实现一个抠图小工具

利用canvas实现一个抠图小工具 0 前言 作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我们做这个事...

3225

扫码关注云+社区