css中如何實作border邊框顏色漸層程式碼詳解
- 伊谢尔伦原創
- 2017-07-19 11:06:1910785瀏覽
在css中，如果一條邊框線有n像素的寬度，那麼就可以對其設定n種不同的顏色。
在程式碼中，我們可以定義寬為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檔案後，我們得到的效果如下：
程式碼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的邊框顏色設定是從外向內的，所以第一個顏色編碼是最外層顏色，而最後一個顏色編碼是最內層的顏色。
### ###以上是css中如何實作border邊框顏色漸層程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn