CSS3 common attributes (linear gradient, radial gradient, new background value, new border value)

“This is the ninth day of my participation in the Gwen Challenge.

Linear gradient

Parameters:

background: linear-gradientColor1 [percent] color2[percent]...Copy the code

Direction: Can be 8 angles (left to right to right; B: I’ve searched it from top to bottom. It can also be Angle deg, Angle 45deg is the same as going from the bottom left to the top right

Color1 [percent] : the color can be multiple, from color1 gradient to color 2, then gradient to color 3, percent can set the color in the box position, from x% gradient to the next color

From left to right:

.test {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: linear-gradient(to right, yellow, red); 
}
Copy the code

45DEG VS from bottom left to top right:

background: linear-gradient(45deg, yellow, red); 
background: linear-gradient(to top right, yellow, red); 
Copy the code

Set three colors, yellow-green-red, from 50% of the box from yellow to green, from 80% of the box from green to red, to 100% of the box is still red, from left to right:

background: linear-gradient(to right, yellow 50%,green 80%, red); 
Copy the code

Operation effect:

Radial gradient

background:radial-gradient(shape radius/(a,b) at position, color [percent], color [percent] )
Copy the code

round

At the center of the box, the radius is 50px and the diameter changes from yellow to green:

.test {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background:radial-gradient(circle 50px at 100px 100px,yellow, green);
}
Copy the code

Set Percent so that the yellow part fades to green starting at 50% of the radius

background:radial-gradient(circle 50px at 100px 100px,yellow 50%, green);
Copy the code

Set the color transparent to make everything outside the radius transparent (not white).

background:radial-gradient(circle 50px at 100px 100px,yellow 50%, green,transparent);
Copy the code

Change the yellow to transparent with only one ring left:

background:radial-gradient(circle 50px at 100px 100px,transparent 50%, green,transparent);
Copy the code

The ellipse:

background:radial-gradient(ellipse 50px 100px at 50% ,transparent 50%, green,transparent);
Copy the code

background:radial-gradient(ellipse 50px 100px at top left ,transparent 50%, green,transparent);
Copy the code

background:radial-gradient(ellipse 50px 100px at top left ,transparent 50%, green,transparent),
           radial-gradient(ellipse 50px 100px at top right ,transparent 50%, green,transparent);
Copy the code

New background value

Background-origin: Specifies the starting point for drawing the background image

.test {
    width: 60px;
    height: 60px;
    border: 20px solid rgba(123.123.34.0.5);
    padding: 20px;
    background: url(img1.png);
    background-origin: border-box;            
}
Copy the code

Background-clip: Specifies the display range of the background

Parameters: the border – box | padding – box | content – box default attribute values are: < div style = “box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 13px! Important; white-space: normal; word-break: break-all;

        .test {
            width: 60px;
            height: 60px;
            border: 20px solid rgba(123.123.34.0.5);
            padding: 20px;
            background: url(img1.png);
            background-origin: content-box;
            background-clip: content-box;
        }
Copy the code

Running results:



Comparison of three attributes:

Background-size: Specifies the size of the image in the background

        .test {
            width: 60px;
            height: 60px;
            border: 20px solid rgba(123.123.34.0.5);
            padding: 20px;
            background: url(img1.png);
            background-repeat: no-repeat; 
        }
Copy the code

background-size: 100% 100%;
Copy the code

background-size: 70px;
Copy the code

Case: Display of star map (Sprite/Sprite)

It could be 5 stars, it could be 4.5 stars; If you use pictures to achieve the star effect, you need many pictures; Images have to be requested individually, so it takes a lot of performance and time to request them, so you can put multiple images in one large image, and then control what part of the box is displayed. You can adjust the height of the box to show what part you want, and then adjust background-position to bring up what you want

.test {
    background-image: url(./start.jpg);
    width:500px;
    height:107px;
    background-position: 0 -107px;
    }
Copy the code

Start. JPG is 500 by 535 and there are five lines, so I set the height to 107px, enough to show a line, and the width to 500px, enough to show a whole line.

Adjust the position in background-position and move 107px up to reveal the second row of stars (4 stars)



To find which part of the image you want, use Position

The entire image looks like this:

The new border value

Css2.1 has attributes that were not discussed in detail before

border-width:1px;
border-style:solid;
border-color:red;
Copy the code

Border-color can also be opened:

border-top-color; border-right-color; 
border-bottom-color; border-left-color;
Copy the code

Set colors for each of the four directions

Example: Draw a small triangle with border

.test {
    width:0px;
    height:0px;
    border : 50px solid transparent;
    border-top-color: rgba(100.123.3.0.8);
    }
Copy the code

CSS3 New border value: border-image

Border-image: Adds a background image to a border

Parameter: URL number styleCopy the code

Url: image address Number: image clipping value Style: image adding method stretch, round, repeat

Number: Crop the image by number, top to bottom number px, crop it, bottom to top Number PX, left to right number PX, right to left number PX; Divide into 9 areas, mark 1-9 respectively, and place them at the specified location of border:

1, 3, 7 and 9 are placed on the upper left, upper right, lower right and lower left respectively;

2 at top, 4 at left, 6 at right, 8 at bottom;

5 position no use

So if we have a good number, where do we cut

The default style is stretch tiling, which will stretch the image at positions 2, 4, 6 and 8 until it is all over the border (except the position at corner 4). Round will tile the pictures of 2, 4, 6 and 8, but retain the whole picture completely. Scale appropriately. Repeat will tile from the middle of positions 2, 4, 6 and 8, and display as much as will be displayed when tiling to the corner

Case study: Lace

.test {
    width:200px;
    height:200px;
    border : 50px solid rgba(100.123.3.0.5);
    border-image:url(border-test1.png) 27 stretch;
    background-image: url("img1.png")}Copy the code

border-image:url(border-test1.png) 35 round;
Copy the code