全國服務熱線:0663-8689819 手機熱線:13640377000
新聞中心網站專題聯系我們
博亞新聞 電子商務 行業新聞 網絡營銷 行業門戶 網站建設 通知公告

CSS圓角框組件 V1.0

博亞網絡: 2014-12-05    閱讀數:2161

文章導航:

第一章:基本的圓角框

第二章:透明圓角化背景圖片

第三章:圓角化圖片

第四章:CSS圓角框組件 V1.0

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

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

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

先看看最終效果截圖:

圖一

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

純線框圓角。

標題線框圓角。不帶背景色或背景圖片,透明。

標題和內容區可分別自定義顏色圓角。

標題背景圖片圓角。標題帶背景圖片時,自動實現圓角。

裝飾性背景圖片圓角。容器有裝飾性背景圖片時,自動實現圓角。

Img圖片圓角。如果有img標簽引用圖片時,自動實現圓角。

  • 揭陽市博亞網絡科技有限公司
    廣東省揭陽市榕城區望龍頭村蓮花大道以西中天大廈隔壁1301號博亞網絡
    電話:0663-8689819
    傳真:0663-8689829 網站備案號:粵ICP備15011300號
400-660-5510qqsina
 
 
 
陕西快乐10分开奖直播 开个投标公司赚钱吗 2017哪个游戏赚钱 什么样的饭店赚钱 白酒代理赚钱不 老公赚钱老婆花这类歌曲 违法赚钱的网站 建一家赚钱的鸡养殖场 诗词论坛如何赚钱 无车开滴滴赚钱吗 货运车怎么赚钱 那些捕鱼达人能赚钱吗 手游代练赚钱平台 发抖音视频也能赚钱 卖壁纸赚钱吧 益智游戏赚钱 淘宝主播创业赚钱葳fxsh33