首頁 > web前端 > css教學 > CSS3教學(3):border-color網頁邊框色彩_css3_CSS_網頁制

CSS3教學(3):border-color網頁邊框色彩_css3_CSS_網頁制

黄舟
發布: 2016-12-23 15:56:36
原創
1728 人瀏覽過

網頁製作Webjx文章簡介:現在我們來看看如何為邊框的border-color添加更多的色彩。 現在我們來看看如何為邊框的border-color添加更多的色彩。 上一篇介紹了:CSS3教學(2):網頁邊框半徑和網頁圓角 使用CSS3的border-r


現在我們來看看如何為邊框的border-color添加更多的色彩。 
現在我們來看看如何為邊框的border-color增添更多的色彩。
上一篇介紹了:CSS3教學(2):網頁邊框半徑和網頁圓角 
使用CSS3的border-radius屬性,如果你設定了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個像素,但只聲明了5或6中顏色,那麼最後一個顏色將會被加到剩下的寬度。 瀏覽器相容性 
目前只有Firefox支援CSS3 border-colour屬性,所以我們這裡只需使用-moz前綴。 
所有本系列關於CSS3的文章都會及時更新,以追蹤瀏覽器的相容性。 CSS3中的邊框顏色 

CSS3教學(3):border-color網頁邊框色彩_css3_CSS_網頁制

這裡有一個10px寬的標準邊框和邊框顏色: 
#borderColor { border: 10px solid #dedede; -moz-border-bottom-colors: #30006080000 #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; } 
瀏覽器支援:

瀏覽器支援:

.Fire 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-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; } CSS3教學(3):border-color網頁邊框色彩_css3_CSS_網頁制瀏覽器支援:

FireFox (3.0.5)
瀏覽器支援:

(2.0.156 )

Internet Explorer (IE7/IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

 網頁制的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板