How to set border color gradient in css3? Two implementation methods of css3 border color gradient-CSS Tutorial-php.cn

How to set border color gradient in css3? Two implementation methods of css3 border color gradient

不言

Release： 2018-09-12 14:24:34

Original

91091 people have browsed it

Many times when developing web pages, you may need to set a color gradient for the border for some reasons. So how to set a color border gradient? This article will introduce you to how to set the border color gradient using css3.

When we set the border color gradient, we can use the properties in css3 to be border-image or border-colorcss3 border color gradient. How to set the two properties? Border color gradient.

Let’s first look at an example of a simple css3 border color gradient implemented by the border-image attribute:

First type: border-image setting border color gradient example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border:10px solid #ddd;
            border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
            border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
            border-image: -o-linear-gradient(#F80, #2ED) 20 20;
            border-image: linear-gradient(#F80, #2ED) 20 20;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

css3 border color gradient effect is as follows:

How to set border color gradient in css3? Two implementation methods of css3 border color gradient

Note: In the above code, you will find that linear-gradient is added to border-image ,Why is this? Because if you don't add linear-gradient, there will be no linear gradient effect. (There are many usages of border-image, you can refer to css manual.)

After reading the example of border color gradient implemented by border-image attribute, let’s take a look at border-color Example of property implementing border color gradient.

Second: border-color setting border color gradient example

The border-color attribute provides us with multiple colors for the same border, but so far only Firefox 3.0 browser supports this attribute. So we need to add the -moz- prefix when using or testing.

Let’s take a look at the usage:

.box{
    border：5px solid transparent;
    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}

Copy after login

We now set 5 colors for each border, and they all occupy a width of 5px. At this time, the border-width of each color is 1px. In fact, if we set a border width of x pixels and set y colors for each border, if x>y, then the first y-1 colors each occupy 1px, and the last color occupies x-y 1 pixels.

Let’s look at an example of css3 border color gradient: three-dimensional gradient effect

.box {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

Copy after login

The effect is as follows:

How to set border color gradient in css3? Two implementation methods of css3 border color gradient

##Related recommendations:

Share how to use the box-shadow attribute in CSS3, including inner shadow box-shadow: inset

css color gradient example: how to implement css3 text color gradient

The above is the detailed content of How to set border color gradient in css3? Two implementation methods of css3 border color gradient. For more information, please follow other related articles on the PHP Chinese website!