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

模型4 跟模型1、2、3又有什么區(qū)別呢？邊框和顏色，讓我們來解決這些因素吧。

HTML 代碼：

<div class="roundedBox" id="type4">
<strong>My content in roundedBox Type 4</strong>
<div class="corner topLeft"></div>

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

CSS 代碼 (在 sprite 中給您的邊角的邊框都添上邊框，并使 .roundedBox 類的背景及邊框融合 sprite。)

好了，這個就是截圖效果。我們的邊角還不能正確地覆蓋 #type4 邊框。所以我們必須矯正它們的定位來覆蓋早期的定位樣式。讓我們做到這一點:

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

好了，這就是我們完成的模型 4。預(yù)覽圓角矩形模型4 (紅色邊框). We are almost there, don’t quit now :p模型

5 (垂直漸變)

好了，模型5會需要更多的工作量，我們應(yīng)該這樣:

1. 修改上下邊角的高度 (由漸變度決定(depending on your gradient))。
2. 修改上下邊角的背景圖定位 (由漸變度決定)。
3. 通過重復(fù)平鋪 1px 的背景圖片來創(chuàng)建容器 div 的漸變效果。
4. 值得注意的是，我們必須給內(nèi)容設(shè)置一個大小，或者給容器設(shè)置一個最小高度(由漸變度決定)。

讓我們開始吧。

HTML 代碼 (跟之前的一樣)：

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

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

CSS 代碼：

我的漸變是從上到下垂直的。所以我們必須增加上邊角的高度，以及更改下邊角的背景圖位置。當(dāng)您看到我的新的 sprite 就會明白為什么會這么處理。就是下面這張:

我的div中的背景圖片是這樣的:

1px 的寬度，它的確是存在的。 我的下邊角有一條實心顏色，剛好可以匹配div的背景色。 少說話多行動。我們來繼續(xù)定義容器 div :

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

給容器設(shè)置的背景顏色是我從底部邊角中吸取的。然后將背景圖片按 x 方向進(jìn)行重復(fù)。最后我給它設(shè)置一個最小高度，正如我之前所說的，漸變才不會泄露。最后來加上所有的邊角 (我將文件的類型修改為 .png 格式的圖片，為的是能得到更好的漸變質(zhì)量):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}

現(xiàn)在，我增加上邊角的高度 (這是由漸變最后抵達(dá)的顏色位置決定的):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}

最后，我糾正下下邊角的背景圖定位:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! - 預(yù)覽圓角矩形模型 5 (垂直漸變)

IE6 版本

這項技術(shù)在這一令人討厭的瀏覽器中是有問題的。我們必須給容器 (.roundedBox, or #type1, #type2, 等等) 確定寬度跟高度。如果您沒有定義它，那么它會泄露到盒模型之外。 使用 IE6 條件式注釋法來定義它。

最后的想法

我希望這項技術(shù)對您會有幫組，并且不會顯得太難。垂直漸變、透明的角落，只要多加練習(xí)，您的腦袋會變得更加好用，也會更加容易定義樣式。

VIA: Css Globe 我想網(wǎng) 板凳 翻譯

本文鏈接：http://m.95time.cn/tech/web/2009/6689.asp　

出處：譯言
責(zé)任編輯：bluehearts

上一頁 CSS Sprites + 圓角 [3] 下一頁

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