App下載

CSS如何給邊框加上漸變？

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

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

實現(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)建一個表示兩種或多種顏色線性漸變的圖片。*/
     }  
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

CSS

0 人點贊