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部分顯示問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！