How to implement multi-color borders, detailed explanation of border-colors attribute-CSS Tutorial-php.cn

How to implement multi-color borders, detailed explanation of border-colors attribute

云罗郡主

Release： 2018-10-23 13:47:55

Original

3884 people have browsed it

In the css style, many beginners of css don’t know how to use css to achieve multi-color borders? In fact, how to achieve multi-color borders we can use the border-colors attribute, then? How to implement multi-color borders in css? Let's summarize the border-colors properties.

In CSS3, we can use border-colors to create multi-color borders, but many people always confuse border-color and border-colors. What we use here is border-colors, and Not border-color.

border-colors syntax:

-moz-border-left-colors: color value; for the border-colors attribute, we should pay attention to three points:

1. If The border-width is w pixels, which means that the border can be in several colors, but the premise is that each color has a unique width limited by color.

2. Because border-colors cannot be used by all browsers, we add a -moz- in front of the code.

3. We cannot set the color of four sides at the same time, but we can divide it into four sections to set the color of the four sides.

Example:

<!DOCTYPE html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-colors属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border-width:5px;
        border-style:solid;
        -moz-border-top-colors:red orange yellow green cyan blue purple;
        -moz-border-right-colors: red orange yellow green cyan blue purple;
        -moz-border-bottom-colors: red orange yellow green cyan blue purple;
        -moz-border-left-colors: red orange yellow green cyan blue purple;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

Copy after login

Specific code effect:

How to implement multi-color borders, detailed explanation of border-colors attribute

##Analysis: You can see it above border-width:5px; indicates that 5 colors are used, so we can use five colors for the border settings.

The above is how to implement multi-color borders in css? A complete introduction to the border-colors attribute summary. If you want to know more about

CSS video tutorial, please pay attention to the php Chinese website.

The above is the detailed content of How to implement multi-color borders, detailed explanation of border-colors attribute. For more information, please follow other related articles on the PHP Chinese website!