DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3網頁制作教程:詳解CSS3實現圓角代碼
CSS3網頁制作教程:詳解CSS3實現圓角代碼
編輯:CSS進階教程     

其實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簡單的實現圓角

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved