CSS3學習筆記 之 邊框顏色

2021-06-25 08:08:31 字數 2416 閱讀 2129

css2中的邊框主要有三個型別值:

border-width: 設定元素邊框的粗細

border-color: 設定元素邊框的顏色

border-style:  設定元素邊框的型別

這三個值中唯一需要的是border-style,否則邊框樣式起不到效果。

也可以為不同的邊框設定不同的風格,遵守t/r/b/l原則(即top,right,bottom,left,可以理解為順時針順序),可以單獨寫為:

border-top-style, border-right-style, border-bottom-style, border-left-style

還有簡寫形式:

borer-style: solid     /*乙個值時,表示四條邊都solid型別  */

border-style: solid dotted /*兩個值時,第乙個值表示元素上下邊框型別,第二個值表示左右邊框型別  */

border-style: solid dotted dash /*三個值時,第乙個值表示元素頂邊的型別,第二個值表示元素左右邊框型別,第三個值表示底部邊框型別  */

border-style: solid dotted dashed inset  /*四個值時,第乙個值表示元素頂邊型別,第二個值表示元素右邊型別,第三個值表示元素底邊的型別,第四個值表示元素左邊型別  */

邊框顏色屬性:

border-color屬性語法如下:

border-color: | transparent | initial | inherit  

每個值的含義如下:值描述

color

設定背景顏色,預設顏色為黑色

transparent

設定背景顏色為透明

initial

將顏色值設定為預設值

inherit

從父元素繼承顏色屬性

如果想實現各個邊框的顏色不一樣或者每個邊框有多重顏色,需要使用擴充套件寫法如下:

border-top-colors: [ ]*

border-right-colors: [ ]*

border-bottom-colors: [ ]*

border-left-colors: [ ]*

上面語法的含義:如果邊框的width被設定為n個畫素,那麼最多可以設定n個顏色,每個顏色的寬度為1px,例如,邊框的寬度設定為10px,但是只設定了6組邊框顏色,那麼最後一組邊框顏色將自動渲染剩餘的寬度。

樣例:

假設邊框寬度已經被設定成了10px,下面設定頂部邊框的顏色如下:border-top-colors: red green blue

含義:頂部邊框包含三類顏色,紅色,綠色和藍色,紅色和綠色寬度為乙個畫素,藍色寬度為8個畫素

由於css3的border-color屬性還沒有成為標準規範,為了讓不同的瀏覽器能渲染正常,有必要加上字首,如下表所示:

瀏覽器分類

瀏覽器私有屬性的字首

gecko引擎核心的瀏覽器

mozilla(firefox)

-moz-

presto引擎核心的瀏覽器

opera

-o-khtml引擎核心的瀏覽器

konqueror

-khtml-

trident引擎核心的瀏覽器

internet explorer

-ms-

webkit引擎核心的瀏覽器

chrome,safari

-webkit-

例如,ff瀏覽器可以寫成如下形式:

-moz-border-top-colors:  #111   #222   #333  #444  #555

-moz-border-right-colors:  #111   #222   #333  #444  #555

-moz-border-bottom-colors:  #111   #222   #333  #444  #555

-moz-border-left-colors:  #111   #222   #333  #444  #555 

瀏覽器的相容性:

對於border-color屬性,大部分瀏覽器還都支援,只有ff3.0+版本才支援其自己實現的版本。

樣例

如下**實現立體漸變邊框效果:

顯示效果如下:

css3學習筆記之邊框

123 4567 891011 1213 1415 1617 1819 20 html head style t1 body divid t1 border radius 屬性允許您為元素新增圓角邊框!box shadow12 3456 78910 1112 1314 1516 1718 19 ht...

CSS3邊框 邊框顏色 border color

css3提供了新的邊框 其中,有圓形邊框,邊框的顏色也是非常有趣。mozila firefox已經支援該特性,你可以創造很酷的邊框。請看乙個例子 在mozilla瀏覽器 firefox中效果為 顯示一灰色的邊框 該效果css3 如下 border 8px solid 000 moz border b...

CSS 3學習 邊框

在css 3中可以設定邊框圓角 邊框陰影和邊框影象,分別通過border radius border image和box shadow屬性設定。border radius屬性是以下4個屬性的簡寫 border top left radius 設定左上角的圓角 border top right rad...