首先，我們會(huì)給容器 div 一個(gè) .roundedBox

類 :

<div class="roundedBox"></div>

現(xiàn)在，我們必須再增加四個(gè) div ，這會(huì)在將來創(chuàng)建圓角的時(shí)候用到。之后必須給每個(gè)加載一個(gè)類 .corner，同時(shí)也標(biāo)識(shí)一個(gè)類來指定它們格子的位置。

<div class="roundedBox">
<strong>My content in roundedBox Type 1</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>

<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>

一切搞定? 嗯，讓我們把注意力再轉(zhuǎn)移到 CSS 代碼上來。

第三步: CSS 代碼

如你所知, (或者您會(huì)在這里快速學(xué)習(xí)到) 絕對(duì)定位元素通常都依照相對(duì)定位的父元素進(jìn)行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果這個(gè)父元素?zé)o法界定，那么它會(huì)去最近作相對(duì)定位的那個(gè)父元素，直至 body 標(biāo)簽。 哈?! - 好了，如果到此為止您仍沒有掌握，不用擔(dān)心，我們將在第二部分了解它。（翻譯得有點(diǎn)拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）

讓我們先來定義下所有的圓角：

所有的圓角都必須定義絕對(duì)定位，并且注明高度跟寬度。 我的圓角定義的寬度跟高度都是 17px.

.corner {
position:absolute;
width:17px;
height:17px;
}

如果您是第一次切割矩形圓角，那么寬度跟高度很可能會(huì)不一樣 (咄!)。

現(xiàn)在開始定義 div 容器樣式:

.roundedBox {position:relative;}

任何定義有類 .roundedBox 的元素內(nèi)，絕對(duì)定位元素都會(huì)相對(duì)于這個(gè)元素進(jìn)行定位，而不是標(biāo)簽 body。 我們也必須設(shè)置一些padding值，如果沒有設(shè)置，圓角將會(huì)覆蓋我們的文本，這肯定不是我們想要的效果。 重要提示: top 和 bottom padding 值必須 等價(jià)于圓角的 height。left 和 right padding 值必須等價(jià)于圓角的寬度。 正如您已經(jīng)知道的，我的圓角寬度跟高度是相等的，因此，四個(gè)邊角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

我也通過 margin 給我們的 div 流出了一定的空隙

最后，讓我們對(duì)沒有圓角作單獨(dú)定義

我們會(huì)對(duì)每個(gè)圓角作絕對(duì)定位設(shè)置，并且定位背景圖的位置 (根據(jù)我們的 sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}

.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

您可能已經(jīng)注意到，我們的樣式仍然還沒有下載 sprite。我們一般不會(huì)去定義它們的原因是，我們會(huì)使用另外的方法。

最新評(píng)論