Detailed CSS3 linear-gradient and radial-gradient

This article mainly introduces the relevant data about the gradient in CSS, mainly share the knowledge of linear-gradient and radial-gradient in CSS3, and give you another angle of use of the gradient, which is introduced by the example code in very detailed, the needs of friends can refer to, Hope to help everyone.

First, linear gradient

Here we need to look at the basic syntax, and then look at the following example.

    Linear-gradient (90deg,red 20%,blue 50%,yellow 80%);

Obviously through this diagram, you will probably understand the role of setting these parameters. Although I did not use any words to explain it. (So when you don't understand the definition, be sure to practice it.) ）
Next, we're going to do something. We overlap the color dividers.

  width: 300px;
    height: 200px;
    background: linear-gradient(90deg,blue 100px,#fff 100px,#fff 200px,red 200px);

That's right. This is the effect of the above gradient code, is not feeling to break your previous impression of the gradient.

Below we use linear-gradient to achieve cooler results, such as:

is not feeling has broken through their own understanding of the gradient. Let me take a look at this background: this is a regular pattern, we have to find its basic pattern, I believe you have found.

We need to use the knowledge points:

• Background supports declaring multiple linear-gradient, separated by commas;

• When you declare multiple linear-gradient that are first declared, the closer you are to the user. (Here we need to consider the problem of covering, generally use transparent);

• Have not mastered the short way of background, but not the OH;

• Rational combination of background-repeat, background-size and Background-position.

  width: 410px;
    height: 410px;
    background: linear-gradient(rgb(2,222,222) 10px, transparent 10px) repeat left top / 40px,
                linear-gradient(90deg,rgb(2,222,222) 10px, transparent 10px) repeat left top / 40px;

You see, in the past to achieve such an effect, we can only beg the art of drawing, now in the wave of CSS3, we can self-sufficiency (^_^).

And by using gradients we can animate the background color without having to consume extra HTML elements to achieve our desired effect. Example:

/ *
      * This is written in scss, not very friendly to novices, sorry (-_-)
      * /
     @mixin menuaction ($ color) {
         background: linear-gradient ($ color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
         &: hover {
             background-size: 100% 100%;
             color: #fff;
         }
     }

Two, radial gradient

Basically, a radial gradient is almost the same as a linear gradient, except that it spreads outward from the center point. So I'm not going to repeat it here.

Don't say much, draw a concentric circle first:

   border-radius: 50%;
    background: radial-gradient(circle,rgb(22,222,111) 0,rgb(22,222,111) 50px,red 50px,red 100px, rgb(222,222,1) 100px, rgb(222,222,1) 150px,rgb(222,2,111) 150px);

Finally to what end, haha recently various coupons, then we use gradient knowledge to get a coupon it:

The core code is as follows:

    width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                linear-gradient(90deg,transparent 10px, rgb(247,245,201) 10px);
            background-size: 20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,60px 60px,60px 60px,100% 100%;
            background-position: -10px 0,-10px 20px,-10px 40px,-10px 60px,-10px 80px,-10px 100px,60px -30px,60px 90px,left center;

The above code should put size and position in the shorthand attribute, so everyone should have a new understanding of the gradient.