CSS3教程(3):border-color網(wǎng)頁邊框色彩
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:36:28 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁制作Webjx文章簡介：現(xiàn)在我們來看一看如何為邊框的border-color添加更多的色彩。
現(xiàn)在我們來看一看如何為邊框的border-color添加更多的色彩。
上一篇介紹了：CSS3教程(2):網(wǎng)頁邊框半徑和網(wǎng)頁圓角
使用CSS3的border-r
現(xiàn)在我們來看一看如何為邊框的border-color添加更多的色彩。
現(xiàn)在我們來看一看如何為邊框的border-color添加更多的色彩。
上一篇介紹了：CSS3教程(2):網(wǎng)頁邊框半徑和網(wǎng)頁圓角
使用CSS3的border-radius屬性，如果你設(shè)置了border的寬度是X px，那么你就可以在這個(gè)border上使用X種顏色，每種顏色顯示1px的寬度。如果說你的border的寬度是10個(gè)像素，但是只聲明了5或6中顏色，那么最后一個(gè)顏色將被添加到剩下的寬度。 瀏覽器兼容性
目前只有Firefox支持CSS3 border-colour屬性，所以我們這里只需使用-moz前綴。
所有本系列關(guān)于CSS3的文章都會(huì)及時(shí)更新，以跟蹤瀏覽器的兼容性。 CSS3中的邊框顏色
這里是一個(gè)10px寬的標(biāo)準(zhǔn)邊框和邊框顏色：
#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)
相關(guān)文章
CSS3 flex布局之快速實(shí)現(xiàn)BorderLayout布局
所謂的布局管理器分為好多種，最常見的有流式布局管理器（FlowLayout）、邊界布局管理器（BorderLayout）和表格布局管理器（GridLayout）。本文給大家介紹CSS3 flex布局之2015-12-03- css3中新增了一個(gè)屬性 border-image ，這個(gè)屬性允許開發(fā)者使用圖片來定義邊框,擴(kuò)充了 CSS2 中僅有的幾個(gè)預(yù)定義邊框樣式(border-style)。本文給大家介紹css3 border-image邊2015-11-24
實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18- 這篇文章主要介紹了詳解CSS3中border-image的使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角，并附上示例代碼，推薦給有相同需求的小伙伴。2014-12-22
CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius：用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果。現(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28CSS3 border-image詳解、應(yīng)用及jQuery插件
border-image可以說是CSS3中的一員大將，將來一定會(huì)大放光彩，其應(yīng)用潛力真的是非常的驚人?？上壳爸С值臑g覽器有限，僅Firefox3.5，chrome瀏覽器，Safari3+支持border-i2011-08-29深入淺出CSS3 background-clip,background-origin和border-image教程
最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔2011-01-27- css3_快速弄明白border-image2010-06-23
CSS3教程:邊框?qū)傩詁order的極致應(yīng)用
網(wǎng)頁制作Webjx文章簡介：這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用，這些應(yīng)用雖說有些劍走偏門，但在一些特殊的場合，可能還是會(huì)用得上的，如果你對(duì)HTML代碼有潔癖，有2009-04-02