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

相关文章

来自专栏PPV课数据科学社区

数据挖掘系列(4)使用weka做关联规则挖掘

前面几篇介绍了关联规则的一些基本概念和两个基本算法,但实际在商业应用中,写算法反而比较少,理解数据,把握数据,利用工具才是重要的,前面的基础篇是对算法的理解,这...

3456
来自专栏数据结构与算法

P1554 梦中的统计

题目背景 Bessie 处于半梦半醒的状态。过了一会儿,她意识到她在数数,不能入睡。 题目描述 Bessie的大脑反应灵敏,仿佛真实地看到了她数过的一个又一个数...

3255
来自专栏数据结构与算法

P1423 小玉在游泳

题目描述 小玉开心的在游泳,可是她很快难过的发现,自己的力气不够,游泳好累哦。已知小玉第一步能游2米,可是随着越来越累,力气越来越小,她接下来的每一步都只能游出...

2415
来自专栏数据魔术师

运筹学教学 | 十分钟教你求解分配问题(assignment problem)

biu~ biu~ biu~ 我们的运筹学教学推文又出新文拉 还是熟悉的配方,熟悉的味道 今天向大家推出的是 运筹学教学--第六弹 分配问题(Assignmen...

3718
来自专栏CDA数据分析师

翻译 | 简单而有效的EXCEL数据分析小技巧

介绍 我一直很欣赏EXCEL蕴藏的巨大能量。这款软件不仅具备基本的数据运算,还能使用它对数据进行分析。EXCEL被广泛运用到很多领域,例如:金融建模和商业预测。...

16810
来自专栏Python小屋

Python+KNN算法判断单词相似度小案例

本文代码用于判断待测单词与哪个候选单词最接近,判断标准为字母出现频次(直方图)最接近,只考虑了不小心的拼写错误,而没有考虑故意的拼写错误,例如故意把god写成d...

3244
来自专栏机器学习算法与Python学习

机器学习(22)之Apriori算法原理总结

关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 前言 Apriori算法是常用的用于...

3597
来自专栏数据小魔方

时间管理的工具——甘特图(Gantt chart)

今天跟大家分享一种用作时间管理的工具——甘特图(Gantt Chart)。 ▽▼▽ 这种图表的制作理念非常简单,就是通过设定项目开始时间和持续时间,利用堆积条形...

3467
来自专栏前端说吧

JS-几大排序算法(更新中...)

3055
来自专栏软件开发

C语言 基础练习40题

一、题目 1.输入2个整数,求两数的平方和并输出。    2. 输入一个圆半径(r)当r>=0时,计算并输出圆的面积和周长,否则,输出提示信息。 3、函数y=f...

1956

扫描关注云+社区