Detailed explanation of how to implement border color gradient code in css-CSS Tutorial-php.cn

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

伊谢尔伦

Release： 2017-07-19 11:06:19

Original

10795 people have browsed it

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>

Copy after login

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>

Copy after login

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!