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 条评论
登录 后参与评论

相关文章

来自专栏Material Design组件

Human Interface Guidelines —— Image Views & Maps & Pages

3157
来自专栏前端架构与工程

SVG的动态之美-搜狗地铁图重构散记

2390
来自专栏数据小魔方

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

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

3236
来自专栏进步博客

[译]响应式图像

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

912
来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

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

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

921
来自专栏练小习的专栏

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

本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思...

2029
来自专栏练小习的专栏

[译]响应式图像

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

1969
来自专栏数据小魔方

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

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

4314
来自专栏豆包的专栏

白夜追凶 :手 Q 图片的显示和发送逻辑

本文整理总结了手 q 中图片的显示和发送逻辑,以及对透明通道图片的特殊处理。

6082

扫码关注云+社区