一、圆角边框显示不全问题出现条件
应该都知道，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代码就可以让圆角边框不规整：
<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!
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j50133.shtml
