CSS 1px邊界筆畫突破邊界半徑

這是用於web開發的。在具有真正圓角的圓或正方形上使用1px邊框半徑時，筆劃開始中斷。如果我們將其更改爲2px，那麼我們添加的px越多，效果越好。但有沒有辦法解決1px中風這個問題？CSS 1px邊界筆畫突破邊界半徑

background: rgba(32, 32, 32, .9); 
height: 30px; 
width: 30px; 
border: 1px solid white; 
border-radius: 20px; 
:hover { 
height: 300px; 
width: 200px; 
}

附圖片！

enter image description here

來源

2014-04-17 user2605157

請分享一些代碼。 – scx

您可以嘗試使用'box-shadow'作爲替代方案。它往往有更流暢的線條 – TylerH

現在添加到我的文章的代碼！ – user2605157

沒有太多可以做這個，很遺憾。這由瀏覽器決定如何渲染構成彎曲1px邊框的子像素。有些瀏覽器會很好地反鋸齒，其他瀏覽器則不會。

唯一可靠的解決方案是使用圖像，這是... 90年代。或者XD Point是這樣的，我們不應該這樣做，但有時候我們不得不解決不完美的渲染問題，或者使用過時的方法。

來源

2014-04-17 14:00:00

這在指定背景和邊框時很常見。解決這個問題的唯一方法是有兩個單獨的元素，一個具有背景顏色，另一個具有帶填充邊界顏色的邊框顏色等於邊框寬度。

請參閱this article以獲得更好的解釋。

來源

2014-04-17 14:05:29 Guy

謝謝！很有意思。我會試試這個。 – user2605157

add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;這會給你你正在尋找的消除鋸齒。

來源

2015-04-13 15:16:08 HexInteractive

很好...使用了這個。好的解決方案 – user1447679

這也適用於我！謝謝！ – Ringen

CSS 1px邊界筆畫突破邊界半徑

回答

相關問題