溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

在css中實現(xiàn)多色邊框,border-colors屬性的方法

發(fā)布時間：2020-08-31 14:36:59 來源：億速云 閱讀：367 作者：小新 欄目：web開發(fā)

這篇文章主要介紹在css中實現(xiàn)多色邊框,border-colors屬性的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在css3中，我們可以用border-colors來制作多顏色的邊框，但是也有很多人總把border-color和border-colors弄混淆，我們這里用到的是border-colors,并不是border-color。

border-colors語法：

-moz-border-left-colors:顏色值;對于border-colors屬性，我們要注意三點(diǎn)：

1.如果border-width為w像素，就表示邊框可以幾種顏色，但是前提每種顏色都是顏色限制唯一的寬度。

2.因為border-colors并不能所有的瀏覽器都是使用，因此我們在代碼前面加一個-moz-。

3.我們不能同時設(shè)置四條邊顏色，但是我們可以分為四段顏色為四條邊的設(shè)置。

實例:

<!DOCTYPE html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-colors屬性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border-width:5px;
        border-style:solid;
        -moz-border-top-colors:red orange yellow green cyan blue purple;
        -moz-border-right-colors: red orange yellow green cyan blue purple;
        -moz-border-bottom-colors: red orange yellow green cyan blue purple;
        -moz-border-left-colors: red orange yellow green cyan blue purple;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

具體代碼效果：

在css中實現(xiàn)多色邊框,border-colors屬性的方法

在css中實現(xiàn)多色邊框,border-colors屬性的方法

分析：在以上可以看到border-width:5px;說明使用了5中顏色，那么邊框的設(shè)置我們就可以使用五種顏色。

以上是在css中實現(xiàn)多色邊框,border-colors屬性的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)
AI
助
手