您的位置: 首頁 > 資源下載 > 經典產品 > CSS圓角框組件 V1.0
jQuery.Switchable 1.0 回到列表 扣代碼工具——捕獲者2.0
 CSS圓角框組件 V1.0

作者:by0001 時間: 2009-12-30 文檔類型:原創 來自:藍色理想

第 1 頁 CSS圓角框組件 V1.0 [1]
第 2 頁 CSS圓角框組件 V1.0 [2]
第 3 頁 CSS圓角框組件 V1.0 [3]

文章導航:

前序:本來前三篇文章已經將CSS圓角框講解完畢,但從網友反饋中,都說到不好使用,因此有了這篇文章,本文主要是將前面的結果總結修訂后進行JS封裝,方便調用。

在本次封裝中,增加了對真正img標簽引用的圖片實現圓角化,之前的圓角圖片大多是基于背景圖片的,因為純css無法實現img圖片的圓角,有了js的加入,就變成可能了。并且在這次封裝過程中修正了上次的背景圖片下面兩個圓角圖片的定位錯誤問題

其實這個控件的JS代碼很簡單,只需要用到innerHTML就可以完成其大部分工作,而真正的難點在于對于CSS樣式的合并組合使用。

先看看最終效果截圖:

圖一

在我的CSS圓角框組件V1.0中,可以變化出6種基本風格的圓角框(至于顏色風格,則可以說是千變萬化了)。它們分別是:

  1. 純線框圓角。
  2. 標題線框圓角。不帶背景色或背景圖片,透明。
  3. 標題和內容區可分別自定義顏色圓角
  4. 標題背景圖片圓角。標題帶背景圖片時,自動實現圓角。
  5. 裝飾性背景圖片圓角。容器有裝飾性背景圖片時,自動實現圓角。
  6. Img圖片圓角。如果有img標簽引用圖片時,自動實現圓角。

出處:藍色理想
責任編輯:bluehearts

上一頁 下一頁 CSS圓角框組件 V1.0 [2]

相關文章 更多相關鏈接
CSS圓角——圓角化圖片
CSS圓角——透明圓角化背景圖片
CSS圓角——基本的圓角框
JavaScript組件之旅:用Ant構建組件
JavaScript組件之旅:編碼實現和算法
作者文章 更多作者文章
CSS圓角——圓角化圖片
CSS圓角——透明圓角化背景圖片
CSS圓角——基本的圓角框
不用Cookie的仿刷新二級高亮菜單
無hack并支持透明圓角框九宮格
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
扣代碼工具——捕獲者2.0
扣代碼工具——捕獲者
CSS 3.0 參考手冊(中文版)
WebRebuild第三屆年會資料
復雜背景摳毛羽三則(電子書)
第三屆D2資料分享
搜索引擎優化基礎知識PPT
WAP2.0知識分享PPT
文字點陣化的應用
開源ASP博客程序Cmder V2.0
>> 分頁 首頁 前頁 后頁 尾頁 頁次:1/31個記錄/頁 轉到 頁 共3個記錄 分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特