|
靈活的變色龍
舉例來說，如果我們有一個定義列表(<dl>)，把上下兩側(cè)都設(shè)置一個透明的背景圖片以實現(xiàn)圓角效果。我們之后就可以通過設(shè)置CSS的background-color來改變整個盒子的外觀了。
符合語義的代碼應(yīng)該像下面這樣：
<dl> <dt>Mt. Everest</dt> <dd>The tallest mountain in the world.</dd> <dd>29,035 feet</dd></dl>
當(dāng)然了，你也可以用你喜歡的任何結(jié)構(gòu)，但是定義列表結(jié)構(gòu)給了我們足夠多的元素來定義CSS。
下一步，我們將創(chuàng)建一個240像素寬的圖像來作為圓角盒子的頂部。這個圖像的高度會正好能夠包含左右兩側(cè)的白色頂角，其余的部分定義為透明(這樣CSS定義的背景色就能夠穿過圖片顯示了。)圖4為這張圖片壓縮并且放大之后的結(jié)果，這樣我們就可以觀察到圖像的細(xì)節(jié)。
圖4 — 放大的頂部圖像
我們再來做一張相似的圖片，垂直翻轉(zhuǎn)上一張圖片，就可以得到下面的圓角了。在Photoshop中最簡單的方法就是選擇Image >> Rotate Canvas >> Flip Canvas Vertical 。
把頂部圖像設(shè)置為<dt>元素的背景，把底部圖像設(shè)置為整個<dl>的背景，我們就擁有了一個(固定寬度的)可以根據(jù)內(nèi)容多少或是字體大小伸縮的圓角盒子。
dl { width: 240px; margin: 0 0 20px 20px; background: #999 url(box_bottom.gif) » no-repeat bottom left; }dt { margin: 0; padding: 10px; background: #999 url(box_top.gif) » no-repeat top left; }dd { margin: 0; padding: 10px; }
你會注意到，在定義<dl>和<dt>元素的背景顏色和背景圖片的時候我都使用了縮略的方法。等一會兒我們在多種顏色混用的時候你就會了解這樣定義的好處了。
這個例子 展示了上面的CSS代碼如何給盒子的上下兩端設(shè)置背景圖片，并且給盒子設(shè)置一個背景色，讓它穿過圖片的透明部分。我還給字體設(shè)置了一些樣式屬性，并且給每一個<dd>元素的左側(cè)都添加了一個修飾性的箭頭。
試著增大文字的大小，看看示例頁面中的盒子是如何跟著文字的大小而伸縮的。
爬的更高
我們可以做的更漂亮一些，只需給<dl>和<dt>元素設(shè)置不同的背景顏色。這個例子展示了如何用相同的標(biāo)簽和圖片實現(xiàn)兩個不同的背景顏色，外加<dt>元素的白色底部邊框(border-bottom)。
而且，我們并沒有被局限于使用圓角。只要我們堅持創(chuàng)建雙色GIF的原則，我們就可以給盒子的一側(cè)加上任何形狀的背景圖片。這個 最后的例子 中，我們?yōu)楹凶拥牡撞渴褂昧艘粡埿碌膱D片，加上了一個有褐色輪廓的白色山頂(見圖5)。
圖5 — 山坡形狀的替換頂部圖片(放大視圖)
總結(jié)
由于元素的背景圖像(background-image)在背景色(background-color)之上，我們就可以利用這一點來創(chuàng)建透明的GIF圖片以實現(xiàn)圓的或其它形狀的邊角和邊框。將這些修飾性的圖片與CSS配合，我們就能得到一個顏色可以根據(jù)一條簡單的CSS規(guī)則而改變的靈活容器。祝你玩的愉快。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2815089-1-25.html
本文鏈接：http://www.95time.cn/tech/web/2008/5626.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 山頂角 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 山頂角 [2]
