preface

Some time ago, I went to Denver, because it was about time to have lunch, so I didn’t look very carefully. Just because I did not read carefully, the background picture of the article attracted my interest. It was a repeating grid, and AT first I thought it was a small image in the background, generated by repeated arrangement. But when I turned on the check mode, IT turned out to be a gradient. This led to my own further exploration.

This article will introduce the effect of linear-gradient and radial-gradient combined with background-size on front-end style.

A, linear gradient

1.1 Linear Gradients – Basics

background-image: linear-gradient(direction, color-stop1 location, color-stop2 location, ...)
Copy the code
parameter describe The default value If required
direction Specify the direction (or Angle) of the gradient with an Angle value I’ve searched it from the top to the bottom. no
color-stop1 Used to specify the start and end colors of the gradient There is no is
location The start of the gradient for the corresponding color (percentage, pixels) Uniformly occupied box no

For the location parameter in the table above, I added it by myself. I did not find the description of the gradient location when I queried the document, so I added it by myself. The following code is equivalent.

    background-image: linear-gradient( #409eff.#f00.#ff0);
    background-image: linear-gradient( #409eff 0.#f00 50%.#ff0 100%);
Copy the code

1.2 Specific Effects

When you use gradient with background-size, there are unintended effects that happen, which I didn’t know about. Background-size can be used to divide the gradient into small parts.

        section { float: left; width: 100px; height: 100px; margin: 16px; }
        
        section:nth-child(4) {
            background-image: linear-gradient(to left top, #409eff, transparent);
            background-size: 20px 20px; / * direction oblique, length width are effective * /
        }

        section:nth-child(7) {
            background-image: linear-gradient(to bottom, #409eff 0, transparent 1px), linear-gradient(to right, #409eff 0, transparent 1px);
            background-size: 20px 20px; /* Direction up or down, width is invalid */
            padding: 0 1px 1px 0;
        }
Copy the code

You can do some interesting things with this grid.

1.2.1 Grid background

.bg-gridding {
        background-image: linear-gradient(#409eff 0, transparent 1px), linear-gradient(to left, #409eff 0, transparent 1px);
        background-size: 46px 46px;
        background-position: center;
    }
Copy the code

1.2.2 Field grid effect

main.size {
        background-image: linear-gradient(to bottom, #409eff 0,  transparent 1px), linear-gradient( to right, #409eff 0, transparent 1px);
        background-size: 100px 100px;
        padding: 0 1px 1px 0;
    }
Copy the code

Second, the radial gradient

2.1 Radial Gradient – Basics

    background-image: radial-gradient(shape size at position, start-color, ... , last-color);Copy the code
parameter describe The default value If required
shape Determine the types of circles (Ellipse, circle) Ellipse ellipse gradient no
size Define the size of the gradient Apsarp-corner (specify the radius length of the radial gradient from the center to the Angle farthest from the center of the circle) no
position Define the position of the gradient Center (set the middle to the vertical value of the radial gradient center) no
start-color, … , last-color Used to specify the start and end colors of the gradient There is no is

2.2 Specific Effects

2.2.1 Edges and corners of coupons

.ticket {
        position: relative;
        margin: 20px;
        width: 240px;
        height: 80px;
        padding: 0 10px;
        background: #409eff;
    }
    .ticket::after..ticket::before {
        content: ' ';
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        width: 10px;
        background-size: 10px 20px;
    }
    .ticket::after {
        right: 0;
        background-image: radial-gradient(circle at 10px 10px, white 6px.#409eff 7px);
    }
    .ticket::before {
        left: 0;
        background-image: radial-gradient(circle at 0px 10px, white 6px.#409eff 7px);
    }
Copy the code