css3 設計多色邊框

2022-08-29 03:48:07 字數 2270 閱讀 3979

css3中有關於border的屬性一共有三個:設計圓角border-radius

設計邊框背景border-image

,設計多色邊框

border-color。

現在我們來說一說設計多色邊框border-color屬性;那麼在css3

中這個屬性又有什麼不同之處呢?又將如何使用呢?在css2

中,我們可以把border-color同時應用到不同的邊框上,也可以分別在各邊上色,如:

border-color: /*其中可以上乙個值,也可以是多個值,具體我在這裡不多說了,大家用到的也特別多*/

/*我們可以分別給各邊上色*/

border-top-color: /*給上邊框上色*/

border-right-color: /*給右邊框上色*/

border-bottom-color: /*給下邊框上色*/

border-left-color: /*給左框上色*/

上面展示的是給元素邊框上色的方法,大家都知道這樣可以給邊框上唯一色。可是如果想給邊框新增不同的顏色,如果想新增漸變色或彩色我們就需要css3的border-color屬性,不過到目前為止只有firefox 3.0+的瀏覽支援這個屬性。也是因為這一點,css3的border-color應用是相當的少,據我的了解,目前還沒有發現有專案應用css3的border-color來實現邊框特殊效果。但這一點都不會影響我們這些css3的愛好者學習css3各種屬性的熱情。下面我們就繼續,看看css3的bborder-color是如何使用。

前面我們說過css3的border-color目前只有mozilla的firefox3.0+瀏覽器支援,所以我們有必要在前面加上其字首「-moz-」。現在我們來看看其語法的書寫規則:

-moz-border-top-colors:   *; /*頂邊邊框*/

-moz-border-right-colors: *; /*右邊邊框*/

-moz-border-bottom-colors: *; /*底邊邊框*/

-moz-border-left-colors: *; /*左邊邊框*/

從上面的語法規則來看,我們把元素四邊分開了書寫,但這裡有一點和css2的不同之處,在css3中我們使用的是border-top-colors,border-right-colors,border-bottom-colors,border-left-colors,當中的colors是個複數,而在css2中都是border-top-color,border-right-color,border-bottom-color,border-left-color。這一點大家一定要記住了,在css3中是「colors」因為我們是應用多色。這裡大家一定會問,我們假如在各邊應用的顏色相同時,能不能不分開寫呢?直接寫成:

-moz-border-colors:    *;/*這樣縮寫能行嗎?*/

針對這點,我要大聲的告訴大家,上面的寫法是錯誤的,我們不能像css2中的border-color這樣縮寫。如果縮寫的話,是沒有任何效果的。希望大家要記住這個不同之處,以免造成沒有任何效果顯示。

上面我們介紹了css3的border-color與css2中的border-color在語法上的不同之處,下面我們接著來看看其取值上的不同之處。

使用css3的border-color屬性時,如果你的boder寬度設定了x px,那麼你可以在這個邊框上使用x種顏色,此時每乙個顏色就是乙個px。如果你的border寬度設定了10px,而你只運用了三四個顏色,那麼最後乙個顏色將會填充到後面的寬度上。

下面我們來看乙個簡單的例項:

.div 

效果如下所示:

我們還可以利用這個屬性製作漸變的邊框效果

.demo1 

效果如下圖所示:

css3中的border-color相對於前面介紹的css3屬性來說比較簡單點,所以今天也簡單介紹了一下其使用的方法,以及取值的細節之處。最後在提醒大家一點,到目前只有firefox3.0版本以上的瀏覽器才能支援,所以此屬性的應用範圍相對來說很少,幾乎來說沒什麼地方使用。如果只是學習的話,還是可以試試效果。如果需要應用到專案中的話,還是時機不成熟。

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...

css3 下邊框緩緩劃過 CSS3 邊框

css3 邊框 用 css3,你可以建立圓角邊框,新增陰影框,並作為邊界的形象而不使用設計程式,如 photoshop。在本章中,您將了解以下的邊框屬性 border radius box shadow border image css3 圓角 在 css2 中新增圓角棘手。我們不得不在每個角落使用...