css3設(shè)置邊框顏色漸變的方法有哪些

css3設(shè)置邊框顏色漸變的方法有哪些？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供重慶網(wǎng)站建設(shè)、重慶做網(wǎng)站、重慶網(wǎng)站設(shè)計(jì)、重慶網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、重慶企業(yè)網(wǎng)站模板建站服務(wù)，10余年重慶做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

我們?cè)O(shè)置邊框顏色漸變時(shí)可以用到css3中的屬性是border-image或者border-colorcss3邊框顏色漸變，那么兩個(gè)屬性如何設(shè)置邊框顏色漸變。

我們首先來(lái)看border-image屬性實(shí)現(xiàn)的簡(jiǎn)單css3邊框顏色漸變的例子：

第一種：border-image設(shè)置邊框顏色漸變示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border:10px solid #ddd;
            border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
            border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
            border-image: -o-linear-gradient(#F80, #2ED) 20 20;
            border-image: linear-gradient(#F80, #2ED) 20 20;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3邊框顏色漸變效果如下：

css3設(shè)置邊框顏色漸變的方法有哪些

說(shuō)明：上述代碼中你會(huì)發(fā)現(xiàn)給border-image加了linear-gradient，這是為什么呢？因?yàn)槿羰悄悴患觢inear-gradient就不會(huì)有線性漸變的效果。（關(guān)于border-image有很多的用法，你可以參考css手冊(cè)。）

看完了border-image屬性實(shí)現(xiàn)的邊框顏色漸變的例子，我們來(lái)看一下border-color屬性實(shí)現(xiàn)邊框顏色漸變的例子。

第二種：border-color設(shè)置邊框顏色漸變示例

border-color屬性為我們提供了同一條邊框設(shè)置多種顏色，但是目前為止只有Firefox 3.0+的瀏覽支持這個(gè)屬性。所以運(yùn)用或測(cè)試時(shí)我們需要加上-moz-前綴。

我們來(lái)看一下用法：

.box{
    border：5px solid transparent;
    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}

我們這時(shí)給每一條邊框都設(shè)置了5種顏色，且都占據(jù)著5px的寬度。這個(gè)時(shí)候每種顏色的border-width為1px。事實(shí)上，如果我們邊框設(shè)置了x個(gè)像素的寬度，并且為每條邊框設(shè)置了y種顏色，若x>y，則前y-1種顏色每種占據(jù)了1px，最后一種顏色占據(jù)x-y+1個(gè)像素。

我們來(lái)看一個(gè)css3邊框顏色漸變的實(shí)例：立體漸變效果

.box {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

效果如下：

css3設(shè)置邊框顏色漸變的方法有哪些

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css3設(shè)置邊框顏色漸變的方法有哪些大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：css3設(shè)置邊框顏色漸變的方法有哪些
當(dāng)前網(wǎng)址：http://jinyejixie.com/article46/posshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、靜態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、企業(yè)建站、網(wǎng)站維護(hù)、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css3設(shè)置邊框顏色漸變的方法有哪些