How does CSS add gradients to borders?

May 29, 2021 Article blog

When we develop websites, we often involve the use of colors. I f a website uses too many colors, it can cause visual inattention and reduce the user's sense of experience. I f you want the page to be monotonous, you can use gradient colors wisely, which enhances the page's sense of degree. S o how do we use CSS to add gradients to borders? This article W3Cschool editor-in-chief tells you.

To achieve the effect:

How does CSS add gradients to borders?1

The code is as follows:

<!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() 用于创建一个表示两种或多种颜色线性渐变的图片。*/
     }  
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Here's how CSS adds gradient code to the border. T here are many applications in front-end development of gradients, such as font gradients, background gradients, etc., that can be used to make good-looking and cool pages, which are not over-narrated here. Students can practice their own reinforcement.

How does CSS add gradients to borders?

Cookie Consent