CSS:何制作一個向各個方向延展box?

2024-07-11 08:25:08

字體：大中小

來源：轉載

供稿：網友

http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
在HTML中, 如果過你沒有指定一個確定的寬度的話, 塊級元素本身就會在垂直方向上延展. 想象一個無序清單. 這個清單會自己擴展來適應它所有的清單元素. 如果用戶在他們的瀏覽器中增加了字體大小, 清單會在垂直方向上延展, 來適應變大的內容. 有時候, 感覺僅僅在垂直方向延展是非常局限的, 如果水平方向也能和垂直方向一樣因為用戶增加字體大小而自延展那就更好了.概要
如果你用過Firefox 3 Beta的話, 你會發(fā)現(xiàn)它已經會自動這樣處理了. 在Firefox 3增加大小不僅僅是增加字體大小. 它增加所有元素的大小. 這樣看起來非常自然和漂亮. 但是盡管Firefox的市場份額在不斷上漲, 但是我們還是不能指望Firefox的調整大小功能來達成用戶需求.
我嘗試著解釋如何制作一個有以下特點的各方向延展box:

能在所有主流瀏覽器中工作.
在垂直和水平方向上延展.
用一個單獨的背景圖片.

這有些苛求, 特別是要使用背景圖片. 它需要用到一種 CSS精靈技術(圖片的不同區(qū)域用在不同的地方)和滑動門技術(依賴當前的大小顯示不同長度的圖片)的結合方法.讓box水平可延展
有一個簡單的方法讓box水平可延展: 用em來定義你的寬度. 例如:

.box {
width: 35em;
margin: 50px auto;
}

在這里margin屬性只是為了舉例, 讓它水平居中并且總是和瀏覽器頂邊有一定距離.思考圖片定位
在這個例子中, 這是個圓角box, 有點投影, 還有點內部陰影. 這就意味著這個box的四個角顯然是不同的. 這里的挑戰(zhàn)是圖片是不能延展的.我們需要一種方法, 讓四個不同的圓角圖片分別應用到box的四個角上.
我們還需要接合它們讓轉變無明顯界線, 我們還要嘗試著用一個背景圖片完成, 來讓它盡可能生效.
下面是一張你關心的我們需要做什么的示意圖, box將被拼接, 我把它們分開, 你就能看到所有的box了.