&nbs p;
一、圆角边框显示不全问题出现条件
应该都知道， border-radius:50% 可以让元素正方形元素表现为正圆，深入理解其表现机制可参见我之前文章：“ CSS 3 border-radius知多少？”。
如果元素设置了 border 边框，则会表现为一个正 圆 圈圈，类似这样：
但有时候， border 边框的这个圈圈会在边缘处发生剪裁，不是一个完美的圈圈了，类似下面这样：
圈圈的左侧不是圆的了，而是像被什么东西一刀切下去，成了直直的了。
如果是在retina屏幕下，则“一刀切”的效果可能还要更加明显，上下左右都有可能发生剪裁。
出现这种渲染问题，需要满足下面两个条件：
元素的透明度 opac IT y 不是1； 元素的位置并不是完美起止于屏幕的像素点上；第一个条件很好理解；那第二个条件 是什么 意思 呢？
对于普通的 显示器 ，设备像素比devicePixelRatio是 1 ，也就是最小显示单位（渲染单位）是1像素。如果某一个元素的起点是从 0.5 像素 开始 的，那这个元素的开始位置就不是正好在屏幕的像素点上，而是中间。
这其实是个悖论，既然最小渲染单位是1像素，何来从 0.5 像素开始的定位呢？确实，在过去，几乎所有CSS属性设置的小数值的最终表现都是以整数像素体现（如 m arg in: .5px = mar gin : 1px ），在老IE时代更堪称死板（ 4 个 25% 宽 度浮动元素可能最后一个会掉下来）。但是进入CSS3时代后，情况就开始发生变化，着 重要 点名的就是 transform 变换。由于 transform 变换基于矩阵计算，无论是旋转还是拉伸，其点坐标十有八九一定是N位数的小数。如果此时我们的浏览器按照最小的 1 像素开始渲染，那图形的边缘那就是满满的锯齿，渲染效果会非常糟糕 （一 开始的 transform 变换效果真就这么糟糕）。浏览器厂商一看，我去，这效果挫到我自己都看不下去，于是下功夫开始 提升 渲染体验。弄了一套算法，对非整数像素点边缘进行柔化，也就是虽然还是占据的 1 像素的格子，但是边缘像素点通过 半 透明等特殊处理，我们视觉上看就好像元素开始于 0.5 像素的位置。
也正是由于这个 原因 ，当我们使用对元素进行非整数位置的 translate 位移的时候，元素的边缘会有 一点 模糊的感觉。
对于iMac这种5K 显示屏 幕，最小像素点实际上可以小到 0.2 像素，也就是就是 translate 移动 0.2 像素，元素边缘也不会柔化模糊，但是，移动 0.5 像素就不一定了。
因此，如下的HT ML 和CSS代码就可以让圆角边框不规整：
<span class="ele"></span>
.ele { dis play : inline-block; width: 40px; h ei ght: 40px; border: 1px solid # fff; border-radius: 50%; transform: translate(.5px, 0); opacity: 0.6; } 根据我的测试，除了Ch rom e浏览器有圆角边框不规整的问题外，IE浏览器的渲染也同样有问题，表现为右侧边缘明显衰弱：
但是，如果 opacity 设置为 1 ，则无论IE浏览器还是C hr ome浏览器，又变成完美的圆圈圈了，如下（截自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!
三、结束语
上面的 60% 透明度 白色 边框也可以使用RGBA颜色表示： rgba(255,255,255,.6) 。效果是一模一样的，也能让边框完美显示。
那为什么上面我用的是HSLA颜色表示而不是RGBA颜色表示呢？
因为使用HSLA表示白色要比RGBA表示白色可以少2个字母。
这就是我的颜色表示的一个小秘密：白色半透明使用HSLA颜色表示，黑色半透明使用RGBA颜色表示。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-Chrome opacity非1时border-radius圆角边框剪裁问题 全部内容，希望文章能够帮你解决 html5教程-Chrome opacity非1时border-radius圆角边框剪裁问题 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-Chrome opacity非1时border-radius圆角边框剪裁问题的详细内容...