Home > Article > Web Front-end > Detailed explanation of how to implement border color gradient code in css

Detailed explanation of how to implement border color gradient code in css

伊谢尔伦Original: 2017-07-19 11:06:1910771browse

In CSS, if a border line has a width of n pixels, then n different colors can be set for it.

In the code, we can define a solid line with a width of 7px: border: 7px solid #C8C8C8; (Don’t worry about the color set here, it will be new in the subsequent code in Firefox The set color will be overwritten)

If you set the gradient color for the four borders of the border at the same time, as shown in the following code:

<html>  
<head> 
       <style>
        p{
                 height: 100px;
                 width: 100px;
                 border: 7px solid red;
                 border-color: red green yellow black;
             }    
         </style>
</head>
<body>
    <p></p>
</body>
</html>

After running the html file, the effect we get is as follows:

# will automatically allocate the color we set to TOP, and right, bottom, left, are assigned in clockwise order. If we only set three colors, the result is obvious, and they are directly assigned to the borders in the three directions of top, right, and bottom. Therefore, in order to let the code know that we do not want to set the border color according to this rule, we should set the gradient color for the border in each direction separately. The code is as follows:

 <html>  
 <head> 
       <style>
                p{
                       height: 100px;
                       width: 100px;
                       background: #E8F5FC;
                       border: 7px solid red;
                      -moz-border-top-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-right-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-bottom-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-left-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                   }
      </style>
</head>
    <body>
            <p></p>
    </body>
</html>

The execution result is as follows:

It should be noted that the border color setting of border is from outside to inside, so the first color code is the outermost color, and the last color code is the innermost color.

The above is the detailed content of Detailed explanation of how to implement border color gradient code in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of some example usage codes of Border properties in css3Next article：Detailed explanation of some example usage codes of Border properties in css3

See more

Detailed explanation of how to implement border color gradient code in css

Related articles