如何用css使邊框顏色漸變

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

瀏覽器兼容性

目前只有Firefox支持CSS3 border-colour屬性，因此咱們這裏只需使用-moz前綴。

1、CSS3中的邊框顏色

這裏是一個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)

2、有圓角的邊框顏色

#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)