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)