border-radius:50%可让元素正方形元素表现为正圆。css
若是元素设置了border边框，则会表现为一个正圆圈圈，相似这样：浏览器
但有时候，border边框的这个圈圈会在边缘处发生剪裁，个别浏览器显示有差别测试
圈圈的左或者右侧不是圆的了，而是像被什么东西一刀切下去，成了直直的了。3d
出现这种渲染问题，须要知足下面两个条件：orm
1.元素的透明度opacity不是1；blog
2.元素的位置并非完美起止于屏幕的像素点上；ci
对于普通的显示器来讲，最小显示单位（渲染单位）是1像素。若是某一个元素的起点是从0.5像素开始的，那这个元素的开始位置就不是正好在屏幕的像素点上，而是中间。it
之前css大多数以整数像素体现（如 margin: 1px），CSS3以后，状况就开始发生变化，着重要点名的就是transform变换。因为transform变换基于矩阵计算，不管是旋转仍是拉伸，其点坐标十有八九必定是N位数的小数。此时浏览器按照最小的1像素开始渲染，那图形的边缘渲染效果那就是满满的锯齿。后来，浏览器对非整数像素点边缘进行柔化，也就是虽然仍是占据的1像素的格子，可是边缘像素点经过半透明等特殊处理，咱们视觉上看就好像元素开始于0.5像素的位置。form
也正是因为这个缘由，当咱们使用对元素进行非整数位置的translate位移的时候，元素的边缘会有一点模糊的感受。class
据测试，ie也会出现这种状况
因此解决办法？
1.元素尺寸和位置都在都是整数像素
2.不用opacity的使用半透明，用RGBA值 使 border的颜色 rgba(255,255,255,.6)