DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS3教程(3):border-color網頁邊框色彩
CSS3教程(3):border-color網頁邊框色彩
編輯:CSS詳解     

使用CSS3的border-radius屬性,如果你設置了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個像素,但是只聲明了5或6中顏色,那麼最後一個顏色將被添加到剩下的寬度。

浏覽器兼容性

目前只有Firefox支持CSS3 border-colour屬性,所以我們這裡只需使用-moz前綴。

所有本系列關於CSS3的文章都會及時更新,以跟蹤浏覽器的兼容性。

CSS3中的邊框顏色

border-color

這裡是一個10px寬的標准邊框和邊框顏色:

#borderColor {
  border: 10px solid #dedede;
  -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
  padding: 15px 25px;
  height: inherit;
  width: 590px;
}

浏覽器支持:

  • Firefox (3.0.5)
  • Google Chrome (1.0.154+)
  • Google Chrome (2.0.156+)
  • Internet Explorer (IE7/IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)

有圓角的邊框顏色

border-color-round

#borderColorCorner {
  border: 10px solid #dedede;
  -moz-border-radius: 15px;
  -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
  padding: 15px 25px;
  height: inherit;
  width: 590px;
}

浏覽器支持:

  • Firefox (3.0.5)
  • Google Chrome (1.0.154+)
  • Google Chrome (2.0.156+)
  • Internet Explorer (IE7/IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved