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

相关文章

来自专栏沈唁志

PHP使用递归算法查找子集获取无限极分类等实操

递归函数是我们常用到的一类函数,最基本的特点是在函数或子过程的内部,直接或者间接地调用自己的算法,但必须在调用自身前有条件判断,否则无限调用下去,也就是所谓的死...

933
来自专栏前端知识分享

第41天:匀速、缓动运动和图片无缝滚动

缓动运动 公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越...

902
来自专栏CDA数据分析师

用SPSS做数据分析?先弄懂SPSS的基础知识吧

1、SPSS数据分析的流程 ? 2、SPSS特性: ? 3、数据的编辑: 1 常量 数值型常量:除了普通写法外还可以用科学计数法,如:1.3E18; 字符型常量...

19610
来自专栏Golang语言社区

Go项目开发----2048小游戏(上)

刚接触go语言不久,前段时间看到一个2048的项目开发教程,于是就试着练了下手。我的环境采用的是Ubuntu Linux环境。 源码下载: https://gi...

2694
来自专栏GIS讲堂

说说地图中的聚类

虽然Openlayers4会有自带的聚类效果,但是有些时候是不能满足我们的业务场景的,本文结合一些业务场景,讲讲地图中的聚类展示。

643
来自专栏小红豆的数据分析

小蛇学python(6)python实现经典排序算法并可视化分析复杂度

排序算法在算法界是一个怎么样的存在?就好像在学术界中数学的地位,说直接用好像用不上,可是不会做起事情来总会捉襟见肘,左支右绌。找工作的时候,有的面试官甚至会让我...

902
来自专栏AI科技评论

用于规划的分层有限状态控制器| IJCAI2016杰出论文详解

导读:2016国际人工智能联合会议(IJCAI2016)于7月9日至7月15日举行,今年会议聚焦于人类意识的人工智能,本文是IJCAI2016杰出论文(Dist...

3064
来自专栏机器之心

业界 | 探索Siri背后的技术:将逆文本标准化(ITN)转化为标签问题

2744
来自专栏AzMark

贝斯狸的 Python 之旅 -- 深入切片操作及原理

我首先通过 input() 函数,接收了外部输入字符串,然后通过 list 函数的切片,实现了回文数,代码真的好简洁,我自己都佩服我自己,我也不知道小组长会问...

693
来自专栏androidBlog

java递归算法入门小结(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

681

扫码关注云+社区