如何在Google Chrome中使用CSS进行圆角处理

Question

基本上我想弄清楚我如何在CSS中使用谷歌浏览器渲染的DIV圆角

Answer 1

Google Chrome(和Safari)使用以下CSS 3前缀

-webkit-border-radius: 10px;

适用于10px的所有角落

-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;

左上角和左下角为8px

对于Firefox,您可以使用:

-moz-border-radius: 10px;

所有的角落和

-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;

左上角和左下角

Answer 2

要涵盖Chrome,FF和支持CSS 3的任何浏览器:

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}