css中如何解决border-radiusborder部分显示问题
这篇文章主要介绍css中如何解决border-radius border部分显示问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
目前创新互联公司已为成百上千的企业提供了网站建设、域名、虚拟主机、网站运营、企业网站设计、龙游网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
一、圆角边框显示不全问题出现条件
应该都知道,border-radius:50%
可以让元素正方形元素表现为正圆,深入理解其表现机制可参见我之前文章:“CSS3 border-radius知多少?”。
如果元素设置了border
边框,则会表现为一个正圆圈圈,类似这样:
但有时候,border
边框的这个圈圈会在边缘处发生剪裁,不是一个完美的圈圈了,类似下面这样:
圈圈的左侧不是圆的了,而是像被什么东西一刀切下去,成了直直的了。
如果是在retina屏幕下,则“一刀切”的效果可能还要更加明显,上下左右都有可能发生剪裁。
出现这种渲染问题,需要满足下面两个条件:
元素的透明度
opacity
不是1;元素的位置并不是完美起止于屏幕的像素点上;
第一个条件很好理解;那第二个条件是什么意思呢?
对于普通的显示器,设备像素比devicePixelRatio是1
,也就是最小显示单位(渲染单位)是1像素。如果某一个元素的起点是从0.5
像素开始的,那这个元素的开始位置就不是正好在屏幕的像素点上,而是中间。
这其实是个悖论,既然最小渲染单位是1像素,何来从0.5
像素开始的定位呢?确实,在过去,几乎所有CSS属性设置的小数值的最终表现都是以整数像素体现(如margin: .5px = margin: 1px
),在老IE时代更堪称死板(4
个25%
宽度浮动元素可能最后一个会掉下来)。但是进入CSS3时代后,情况就开始发生变化,着重要点名的就是transform
变换。由于transform
变换基于矩阵计算,无论是旋转还是拉伸,其点坐标十有八九一定是N位数的小数。如果此时我们的浏览器按照最小的1
像素开始渲染,那图形的边缘那就是满满的锯齿,渲染效果会非常糟糕(一开始的transform
变换效果真就这么糟糕)。浏览器厂商一看,我去,这效果挫到我自己都看不下去,于是下功夫开始提升渲染体验。弄了一套算法,对非整数像素点边缘进行柔化,也就是虽然还是占据的1
像素的格子,但是边缘像素点通过半透明等特殊处理,我们视觉上看就好像元素开始于0.5
像素的位置。
也正是由于这个原因,当我们使用对元素进行非整数位置的translate
位移的时候,元素的边缘会有一点模糊的感觉。
对于iMac这种5K显示屏幕,最小像素点实际上可以小到0.2
像素,也就是就是translate
移动0.2
像素,元素边缘也不会柔化模糊,但是,移动0.5
像素就不一定了。
因此,如下的HTML和CSS代码就可以让圆角边框不规整:
.ele { display: inline-block; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%;transform: translate(.5px, 0); opacity: 0.6;}
根据我的测试,除了Chrome浏览器有圆角边框不规整的问题外,IE浏览器的渲染也同样有问题,表现为右侧边缘明显衰弱:
但是,如果opacity
设置为1
,则无论IE浏览器还是Chrome浏览器,又变成完美的圆圈圈了,如下(截自IE):
Firefox则表现符合预期。
二、如果解决border-radius border部分显示问题?
知道问题出现触发的条件,那问题解决其实已经解决了一半了。
2种方法:
1. 元素尺寸和位置都在都是整数像素
然而很多时候这种方法并不切实际,尤其对于复杂布局,例如我们使用calc
计算对元素宽度定位时候,或者line-height
使用不容易计算的小数时候,或者基于rem
的布局等等,想要强制元素尺寸和位置都是整数并不太容易。
2. 不使用opacity
实现半透明
既然我们的问题出现与opacity
不是1
有关,那我们就不使用opacity
实现半透明,采用其他的方法代替。
如果我们想使一个边框变成半透明,除了opacity
外,我们还可以使用RGBA或者HSLA颜色。
例如,上面是一个例子的CSS代码换成:
.ele { display: inline-block; width: 40px; height: 40px; border: 1px solid hsla(0,0%,100%,.6);border-radius: 50%;transform: translate(.5px, 0);}
则边框不圆润的问题就消失了,有专门的演示页面,您可以狠狠地点击这里:半透明圆角边框剪裁问题示意demo
结果对比效果如下图:
Nice!
以上是“css中如何解决border-radius border部分显示问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
新闻标题:css中如何解决border-radiusborder部分显示问题
新闻来源:http://scyanting.com/article/jeccoh.html