在代碼中，我們可以定義一條寬為7px的實線：border: 7px solid #C8C8C8;（不要在意此處設定的顏色，在firefox中後面的代碼中會被新設定的顏色覆蓋掉）
如果對border中四邊的邊框同時設定漸層的顏色，如下述代碼所示：
<html> <head> <style> p{ height: 100px; width: 100px; border: 7px solid red; border-color: red green yellow black; } </style></head><body> <p></p></body></html>
運行html檔案後，我們得到的效果如下：
代碼會將我們設定的顏色自動分配給 top、right、bottom、left，以順時針的形式分配。如果我們只設定3個顏色，那麼結果顯而易見，直接分配給top、right、bottom這三個方向的邊框了。因此，為了讓代碼知道我們不是要按此規則設定邊框顏色，應該分別對每個方向的邊框設定漸層顏色，其代碼如下：
<html> <head> <style> p{ height: 100px; width: 100px; background: #E8F5FC; border: 7px solid red; -moz-border-top-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-right-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-bottom-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-left-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; } </style></head> <body> <p></p> </body></html>
其執行結果如下：
需要注意的是，border的邊框顏色設定是從外向內的，所以第一個顏色編碼是最外層顏色，而最後一個顏色編碼是最內層的顏色。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
