8. 圓角（邊框半徑）
Border-radius 無需背景圖片就能給HTML元素添加圓角。現(xiàn)在，它可能是使用最多的CSS3屬性了，很簡單的原因是使用圓角比較好而且不會(huì)對設(shè)計(jì)和可用性有沖突。
不同于添加Javascript或多于的HTML標(biāo)簽，僅僅需要添加一些CSS屬性并從好的方面考慮。這個(gè)方案是清晰的和比較有效的，而且可以讓你免于花費(fèi)幾個(gè)小時(shí)來尋找精巧的瀏覽器方案和基于Javascript圓角。
Sam Brown的博客在標(biāo)題、分類和鏈接處使用了border-radius.
Sam Brown在他的博客的標(biāo)題、分類、鏈接和div中大量的使用了border-radius屬性。使用圖片來實(shí)現(xiàn)該效果將會(huì)比較費(fèi)時(shí)的，這是在項(xiàng)目中使用CSS3屬性是提高開發(fā)效率的重要步驟的原因之一
為了給類別鏈接添加圓角，Sam 使用了下面的CSS片段： h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
} 我們可以做的更進(jìn)一步，添加原始的CSS3 屬性和Konqueror 屬性擴(kuò)展，如下: h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
} 如果我們想在我們的元素中的某個(gè)特定的角上應(yīng)用此屬性，我們可以單獨(dú)的指定每個(gè)角： div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
瀏覽器支持： border-radius只有所有版本的IE瀏覽器和Opera不支持，Webkit和Gecko核心的瀏覽器都支持。
擴(kuò)展閱讀：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 @font-face屬性 下一頁 邊框圖片
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 圓角(邊框半徑)
