中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

8. 圓角（邊框半徑）

Border-radius 無需背景圖片就能給HTML元素添加圓角�，F(xiàn)在，它可能是使用最多的CSS3屬性了，很簡單的原因是使用圓角比較好而且不會對設(shè)計和可用性有沖突。

不同于添加Javascript或多于的HTML標(biāo)簽，僅僅需要添加一些CSS屬性并從好的方面考慮。這個方案是清晰的和比較有效的，而且可以讓你免于花費幾個小時來尋找精巧的瀏覽器方案和基于Javascript圓角。

Sam Brown的博客在標(biāo)題、分類和鏈接處使用了border-radius.

Sam Brown在他的博客的標(biāo)題、分類、鏈接和div中大量的使用了border-radius屬性。使用圖片來實現(xiàn)該效果將會比較費時的，這是在項目中使用CSS3屬性是提高開發(fā)效率的重要步驟的原因之一

為了給類別鏈接添加圓角，Sam 使用了下面的CSS片段：

h2 span {
 color: #1a1a1a;
 padding: .5em;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 }

我們可以做的更進(jìn)一步，添加原始的CSS3 屬性和Konqueror 屬性擴展，如下:

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

如果我們想在我們的元素中的某個特定的角上應(yīng)用此屬性，我們可以單獨的指定每個角：

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核心的瀏覽器都支持。

擴展閱讀：

• CSS3系列教程:邊框半徑和圓角
• border-radius: W3C Working Draft
• Border-radius: create rounded corners with CSS! — CSS3.info
• Introduction to CSS3, Part 2: Borders
• An Ode to border-radius
• CSS3 Border-Radius and Rounded Corners

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 用CSS3將你的設(shè)計帶入下個高度 [8] 下一頁 用CSS3將你的設(shè)計帶入下個高度 [10]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。