App下載

CSS如何給邊框加上漸變？

猿友 2021-03-15 11:50:38 瀏覽數(shù) (5468)
反饋

當(dāng)我們開發(fā)網(wǎng)站時(shí)，時(shí)常會(huì)涉及到顏色的使用。如果一個(gè)網(wǎng)站使用過(guò)多的顏色會(huì)造成視覺的不集中，會(huì)降低用戶的體驗(yàn)感。如果想要讓頁(yè)面不過(guò)于單調(diào)，就可以進(jìn)行合理使用漸變色，會(huì)增強(qiáng)頁(yè)面的程度感。那么我們用CSS 如何給邊框加上漸變呢？這篇文章 W3Cschool 小編告訴你。

實(shí)現(xiàn)效果：

02

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>W3Cschool-編程獅</title>
    <style>
     div{
        width:200px;
        height: 80px;
        background:transparent;
        margin-top: 50px;
        margin-left: 100px;
        border:3px transparent solid;
        border-image:linear-gradient(to right,#FF0033,#FFCCCC) 1 10;/*linear-gradient() 用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。*/
     }  
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以上就是 CSS 如何給邊框加上漸變的代碼。漸變?cè)谇岸碎_發(fā)中的應(yīng)用還有很多，比如字體漸變，背景漸變等，可以利用漸變做出好看又酷炫的頁(yè)面，此處就不在過(guò)多敘述。同學(xué)們可以自行練習(xí)加強(qiáng)鞏固。

CSS

0 人點(diǎn)贊