中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

現(xiàn)在我們來看一看如何為邊框的border-color添加更多的色彩。

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

瀏覽器兼容性

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

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

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)

有圓角的邊框顏色：

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

本節(jié)原文：
http://www.zenelements.co.uk/blog/css3-border-color-colour

特別聲明，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate fromZen Elements, thanks Alex for his great work so much.

出處：前端觀察
責任編輯：bluehearts

上一頁 邊框半徑和圓角 下一頁 陰影

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。