CSS圓角框元件 V1 0

2022-04-05 12:15:58 字數 4399 閱讀 3560

原創:冰極峰

第一章:基本的圓角框

第二章:透明圓角化背景

第三章:圓角化

第四章:css圓角框元件 v1.0

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

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

其實這個控制項的js**很簡單,只需要用到innerhtml就可以完成其大部分工作,而真正的難點在於對於css樣式的合併組合使用。

先看看最終效果截圖:

圖一在我的css圓角框元件v1.0中,可以變化出6種基本風格的圓角框(至於顏色風格,則可以說是千變萬化了)。它們分別是:

1.純線框圓角。

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

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

4.標題背景圓角。標題帶背景時,自動實現圓角。

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

6.img圓角。如果有img標籤引用時,自動實現圓角。

js**就不用詳解了,都很簡單,我在js中作了詳細的注釋說明,一看就會。下面說說這6種風格的呼叫方法:

第一種:純線框圓角

這是最基本,也是應用最廣泛的一種應用。只需一句話就可以了。

js行為:

b_roundcurve(

"bottom",

"#f8b3d0",

"#fff5fa",

1);//普通圓角框

解釋:四個引數,分別代表樣式名稱、邊框色值、背景色值、風格引數。

html結構:

<

div 

class

="bottom"

>

div>

第二種:標題線框圓角

一般這種塊狀布局,都需要在頁頭加入標題,你可以使用h1~h6系列標籤。

js行為:

b_roundcurve(

"right2",

"orange",

"",3,

"h3");

//標題和內容區都透明

解釋:五個引數,分別代表樣式名稱、邊框色值、背景色值、風格引數、標題標籤名稱,因為考慮了擴充套件性,當想使用其它的標籤時,可以隨時替換,如h1~h6系列標籤。

html結構:

<

div 

class

="right2"

>

<

h3>

標題h3

>

<

div>

內容div

>

div>

第三種:標題和內容區可分別自定義顏色圓角

與第二種風格差不多,差別在於可以分別定義標題和內容區的顏色值。

js行為:

b_roundcurve(

"right1",

"#863313",

"#84d4ca",

3,"h3

","#bab556");

//標題只用純色背景

解釋:六個引數,分別代表樣式名稱、邊框色值、背景色值、風格引數、標題標籤名稱、標題背景色值。

html結構:

<

div 

class

="right1"

>

<

h3>

標題h3

>

<

div>

內容div

>

div>

這種需要將標題的背景路徑作為引數傳入,有了背景,一般都不需要背景顏色了,所以將第六個引數值設為空:

js行為:

b_roundcurve(

"right3",

"#a0c044",

"#e9f2cc",

3,"h3

","",

"image/bg1.gif");

//標題用背景

html結構:

<

div 

class

="right3"

>

<

h3>

標題h3

>

<

div>

內容div

>

div>

第五種:裝飾性背景圓角

這種圓角也是用得比較多的,這種風格要注意:在css中需要設定容器的寬高值,因為在js中會查詢到這個的寬高值。

js行為:

b_roundcurve(

"rightbgimg",

"#f38e1a",

"",4);

//圓角背景

html結構:

<

div 

class

=" rightbgimg "

>

div>

第六種:img圓角

純css方法是無法做到img圓角的,但有js的加入,就可以變相實現。原理和第五種相似,只是將這個img的路徑取出來,在js中以背景的方式加入到各個容器中去,然後再還原img標籤。

js行為:

b_roundcurve(

"img",

"#999",

"#fff5fa",

2);//圓角img

解釋:四個引數,分別代表樣式名稱、邊框色值、背景色值、風格引數。

html結構:

最簡潔的html結構,無冗餘**。

<

div 

class

="img"

>

<

a href

=""title

="漂亮女孩1"

alt="漂亮女孩1"

/>

a>

div>

元件優點:

1. 全面相容所有瀏覽器。

2. 圓角不需要,直接**生成,省去製圖的麻煩。

3. 自適應外框的大小,可廣泛應用於布局區塊中。

4. 封裝難以控制的css**,呼叫靈活方便。

5. 封裝html結構,你只需定義你想要的結構,無冗餘,更語義化。

元件缺點:

1. 不能定義線框的大小。如果你需要改變線框大小,本元件不適合你。

2. 圓角不夠圓滑,如果你對圓角的精度要求較高,不宜採用本元件。

3. 線框顏色和背景色不宜採用對比太強烈的顏色,容易看出鋸齒。

本模型在以下瀏覽器中完美通過:

ie5.5、ie6、ie7、ie8、ff3、tt、maxthon2.1.5、opera9.6、safari4.0、chrome2.0。

偏方查詢 v1 0

偏方,即單方驗方。指藥味不多,對某些病證具有獨特療效的方劑。數千年來,在我國民間流傳著非常豐富 簡單而又療效神奇的 疑難雜症的偏方 秘方 驗方,方書著作浩如煙海。偏和正相對,偏方一般沒有被正式的藥物或醫學典籍收載,但有時能取得較好的 效果的治病的方法。偏方的 主要有二種 經驗的積累和家族內部流傳,前...

點對點聊天系統 v1 0

系統需求 聊天交流是目前網際網路提供的主要內容。聊天系統有多種實現方式,類似icq屬於一種點對點的聊天系統,還有一種是基於socket的集中式聊天系統,這種聊天系統需要登入統一的聊天伺服器,每個人的聊天資訊其他人都可以看到,類似一種會議室,當然,兩個人之間也可以進行保密的私語。在基於socket的聊...

專案開發總結 v1 0

1.專案開發的目標 意義 1.本產品的目標 2.專案說明 1.專案代號 2.人員配置 專案經理 系統分析師 軟體工程師 測試人員 美工文件管理員 3.各種角色的職責 1.專案經理 1 負責安排計畫 制定工作流程 協調各種角色的關係 制定工作目標和計畫 向專案主管報告 內部人員的激勵 員工招聘 2.系...