css中如何解决border-radius border部分显示问题

这篇文章主要介绍css中如何解决border-radius border部分显示问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一、圆角边框显示不全问题出现条件

应该都知道，border-radius:50%可以让元素正方形元素表现为正圆，深入理解其表现机制可参见我之前文章：“CSS3 border-radius知多少？”。

如果元素设置了border边框，则会表现为一个正圆圈圈，类似这样：

但有时候，border边框的这个圈圈会在边缘处发生剪裁，不是一个完美的圈圈了，类似下面这样：

圈圈的左侧不是圆的了，而是像被什么东西一刀切下去，成了直直的了。

如果是在retina屏幕下，则“一刀切”的效果可能还要更加明显，上下左右都有可能发生剪裁。

出现这种渲染问题，需要满足下面两个条件：

1. 元素的透明度opacity不是1；

2. 元素的位置并不是完美起止于屏幕的像素点上；

第一个条件很好理解；那第二个条件是什么意思呢？

对于普通的显示器，设备像素比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代码就可以让圆角边框不规整：

<span class="ele"></span>

.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部分显示问题”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！