站長(zhǎng)資訊網(wǎng)
方法：1、border-color屬性同時(shí)設(shè)置四個(gè)邊框的顏色；2、border-top-color、border-bottom-color、border-left-color、border-right-color屬性分別設(shè)置上下左右邊框。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css設(shè)置邊框顏色
方法1：使用border-color屬性同時(shí)設(shè)置四個(gè)邊框的顏色
border-color 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，可設(shè)置一個(gè)元素的所有邊框中可見(jiàn)部分的顏色。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .box{ width: 280px; height: 62px; border-style:solid; border-color: red; } </style> </head> <body> <div class="box">歡迎來(lái)到PHP中文網(wǎng)！</div> </body> </html>
效果圖：
方法2：分別設(shè)置上下左右邊框
-
border-top-color屬性：上邊框顏色
-
border-bottom-color屬性：下邊框顏色
-
border-left-color屬性：左邊框顏色
-
border-right-color屬性：右邊框顏色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .box{ width: 280px; height: 62px; border-style:solid; border-top-color:red; border-bottom-color:paleturquoise; border-left-color:palevioletred; border-right-color:darkcyan; } </style> </head> <body> <div class="box">歡迎來(lái)到PHP中文網(wǎng)！</div> </body> </html>
效果圖：
（學(xué)習(xí)視頻分享：css視頻教程）
