CSS高級技巧之圓角矩形上

2020-03-24 16:46:18

字體：大中小

來源：轉載

供稿：網友

所謂的CSS高級技巧...其實是一些對基本技巧的創意組合, 任何手段和技巧都是解決問題的方法. 只要學會這種思考問題的方法, 你也能擁有屬于自己的CSS秘籍. CSS2 還沒有辦法創造出曲線邊框, 明顯的, 僅僅方框是沒辦法滿足我們設計師的. 所以CSS圓角技術到現在還是那么的火.
1. 固定寬度的純色圓角矩形在眾多圓角技術中, 固定寬度的圓角矩形應該是最容易實現的, 只需要2個圖片以及一段簡單的html代碼. html代碼如下: ＜div ＞＜h1＞標題＜/h1＞＜p＞內容＜/p＞＜/div＞圖片大致如下: top.gif tile.gif bottom.gif CSS代碼大致如下: .wrapper{width:181px;background:#8cc355 url(../images/bottom.gif) no-repeat left bottom;} .wrapper h1{padding:10px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;} .wrapper p{padding:0 20px 10px 20px;} Tips: wrapper中的寬度(width)是圖片的真實寬度, 背景中的背景色是與純色圖片相同的顏色h1和p中相應設置了內補丁,為了內容不重疊或碰到外框. 圖片需要有背景色, 即除了圓角矩形純色部分的顏色以外的區域需要有和當前容器( div )所在的父級容器相同的背景色. 這種方法適用于寬度固定, 高度自適應的純色圓角矩形.
2. 固定寬度的非純色圓角矩形這個方法是上一個方法的延伸, 這次我們不在容器上定義背景色, 而是定義重復的背景圖片. html代碼如下: ＜div ＞＜h1＞標題＜/h1＞＜p＞內容＜/p＞＜/div＞圖片大致如下: top.gif bottom.gif CSS代碼大致如下: .wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;} .wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;} .wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;} Tips: 特性與第一個方法類似; 不能適用于非垂直改變的背景圖像. PS. 固定高度的圓角矩形也可以類似的完成,不贅述了 3. 滑動門技術(Sliding Doors) 前面的兩種圓角矩形都是固定寬度的,只能在垂直方向上自適應增長(或水平方向上), 如果需要同時在垂直方向與水平方向上自適應增長尺寸的話, 很顯然前兩種方法不適用. 這時我們就可以采用所謂的滑動門技術. 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS實例：無懈可擊的CSS圓角技術

下一篇：用CSS3、jQuery創建apple TV海報視差效果