其實CSS3實現圓角的方法只需要設置一個屬性:border-radius(邊框半徑),只要設置一個值就能同時設置四個圓角的半徑
給你一個DIV
設置他的圓角半徑:border-radius:15px;
border-radius可以同時設置1到4個值。如果設置1個值,表示4個圓角都使用這個值。如果設置2個值,表示左上角和右下角使用第1個值,右上角和左下角使用第2個值。如果設置3個值,表示左上角使用第1個值,右上角和左下角使用第2個值,右下角使用第3個值。如果設置4個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。
border-radius 浏覽器的支持:IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius屬性。
早期版本的Safari和Chrome,支持-webkit-border-radius屬性,早期版本的Firefox支持-moz-border-radius屬性。
目前來看,為了保證兼容性,只需同時設置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px;(注意:border-radius必須放在最後聲明,否則可能會失效。)
另外,早期版本Firefox的單個圓角的語句,與標准語法略有不同。
* -moz-border-radius-topleft(標准語法:border-top-left-radius)
* -moz-border-radius-topright(標准語法:border-top-right-radius)
* -moz-border-radius-bottomleft(標准語法:border-bottom-left-radius)
* -moz-border-radius-bottomright(標准語法:border-bottom-right-radius)
以上就是
border-radius簡單的實現圓角