19, Gradual change
1. Linear gradient
(1) Color and angle
- `background-image: linear-gradient(color1,color2,……);` Gradient at least two colors to reflect the color change
-` linear gradient() ` the parameters of gradient colors are separated by commas, and multiple color expressions can be written
-The gradient direction is down in sequence according to the parameter order. You can add an angle or keyword before the color to control the gradient direction
- ` 90deg ` angle
- To endpoint keyword is the location of the endpoint, top, left, right, bottom. Remember to add spaces (not recommended)
[practice]
>Use seven colors to make a rainbow gradient effect
>Colors can use any way to represent color values
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Linear gradient</title> <style> .d1{ width: 300px; height: 200px; border: 2px solid black; /* ramp attributes */ background-image:linear-gradient(red,rgb(246,185,34),green,rgb(83,251,239), blue,rgb(53,0,214),rgb(106,0,122)) ; } </style> </head> <body> </body> <div></div> </html>
[practice]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .nav{ background-color:rgba(160, 146, 146, 0.7); } .center{ width: 1000px; margin:auto; } .nav ul{ list-style: none; height: 40px; } .nav ul >li{ width: 200px; float: left; text-align: center; line-height: 40px; position: relative; background-image: linear-gradient(90deg,#4cc9f4,#5362b4); } .nav ul li a{ text-decoration: none; color: white; } </style> </head> <body> <div> <ul> <li><a href="#"> Home Page</a></li> <li> <a href="#"> wizard list</a> </li> <li><a href="#"> props mall</a></li> <li><a href="#"> online games</a></li> <li><a href="#"> recharge Center</a></li> </ul> </div> </body> </html>
Navigation, color customization
>Total navigation width 1000px height 40px
(2) Gradient scale
-` background image: linear gradient (direction, color 1 start value end value, color 2 start value end value, color n start value end value...)`
-When there are multiple color gradients, the gradient area needs to be adjusted, and the method of controlling the color range can be adopted. The length unit (such as px or%) is added after the color in the function, which is separated by a space.
-[note] when the browser version is low, the start and end values of the gradient are invalid. You need to upgrade the browser version and download the new version of Google browser.
div { width: 600px; height: 300px; border: 2px solid black; background-image: linear-gradient( 90deg, green 0 200px, yellow 200px 400px, red 400px 600px ); }
2. Radial gradient
(1) Gradient direction and range
- `background-image: radial-gradient(color1,color2,......);`
-Background image: radial gradient (color 1, start value, end value, color 2)
Start value end value, color n start value end value...)
(2) Radius
-` background image: radial gradient (radius, color 1, color 4, color 3)`
-` background image: radial gradient (x-axis radius, y-axis radius, color 1, color 4, color 3)`
-If only one parameter is passed in, the gradient shape is a circle
-The radius can be px
-[note] if the real gradient control is smaller than the outer space, the rest will be filled with the last color
(3) Starting point of circle center
-Background image: radial gradient (x-axis radius y-axis radius at x-axis center y-axis center, color 1 start value end value, color 2 start value end value...)
- Add an at space behind the center of the circle. The origin position of x-axis and y-axis can be in length units or keywords. The value can be px,% or keywords: left/top/bottom/right
-Focus
- If only one parameter is passed in, the gradient shape is a circle
- Percentage for color range, radius change, percentage reference radius
- If px is used for the color range, it will not change due to the change of radius
d1 { background-image: radial-gradient( 50px at left top, yellow 0 50px, #222 100px ); } .d2 { background-image: radial-gradient(50px at 20% 30%, yellow 0 50px, #222 100px); }
3. Repeated gradient
-Note that repeated gradients require the browser version, and the browser version with too low version cannot view the effect
-` background image: repeating linear gradient() ` repeated linear gradient
-` background image: repeating radial gradient() ` repeated radial gradient
-When the radius is too small, the page resolution display effect will be strange
.d1 { background-image: repeating-linear-gradient(red 0 2px,yellow 4px 6px,green 8px 10px); } .d2 { background-image: repeating-radial-gradient( red 0 2%, yellow 2% 4%, green 4% 6% ); }
[practice]
>Background image: repeating linear gradient (- 45DEG, #f00 0 10px, #fff 10px 20px, #00f 20px 30px, #fff 30px 40px)
>Button use gradient background image: linear gradient (#ecf6ff, #9bc1e1); shadow box shadow: 0 5px 0 #346a9a;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .d1{ background-image: repeating-linear-gradient(45deg,red 0px 10px,rgb(255, 255, 255) 10px 20px,blue 20px 30px); } .w{ width: 250px; height: 150px; background-color: #fff; position:absolute; top: 22px; left: 22px; } </style> </head> <body> <div> <div></div> </div> </body> </html>
4. Compatibility with gradients
The gradient effect does not support lower version browsers. The previous browsers about css3 are compatible with the private prefix of the manufacturer
Browsers made by browser manufacturers have different compatibility with css in different periods. Each browser has its own kernel
Check the writing method of the gradients in the student mall. Each kernel needs to be written once, four times. But in the end, only the corresponding code will be executed according to the kernel of the current browser
(1) Browser private prefix
-` - webkit - ` browser: chrome/safari/edge
-` - moz - ` browser: firefox
-` - o - ` browser: opera
-` - ms - ` browser: IE
(2) Direction of gradient
-Instead of writing the private prefix, write the end point, such as to bottom
- There is no private prefix. Write it correctly: ` background image: linear gradient (to bottom, red, yellow)`
- There is no private prefix. Wrong writing: ` background image: linear gradient (bottom, red, yellow)`
-The way to write the private prefix is to write the starting point, such as top
- There is a private prefix. The correct way to write it is: ` background image: - WebKit linear gradient (top, red, yellow)`
- Writing method with private prefix error: ` background image: - WebKit linear gradient (to top, red, yellow)`
20, css3 advanced selector
1. Attribute selector
The attribute selector can use '[]' to put the attribute name of the element into it, so as to set its style by looking up the element with the attribute.
The attributes of the element include:
Predefined attributes: such as' id, class, style, title, src, href ', etc
Custom attribute: arbitrarily specified attribute name, such as abc, w123 or more standard custom attribute writing method ` data - *`
(1) Simple attribute selector
-Element with an attribute, such as id, class: ` [attribute name] `
-Specifically, an element has an attribute, such as ` p[class]: element name [attribute name] `
-Elements with multiple attributes, such as ` [id][class]: [attribute name 1] [attribute name 2] `
-Specifically, an element has multiple attributes: ` element name [attribute name 1] [attribute name 2] `
(2) Filter attribute selector
-What is the value of the attribute name of the element, such as id=mydiv: ` [attribute name = value] `
-What value does the attribute name of an element begin with: ` [field starting with attribute name ^ =] `
-What value does the attribute name of an element end with: ` [field ending with attribute name $=] `
-The attribute name of an element includes the value of a field: ` [attribute name * = included field] `
-The attribute name of an element includes an independent field value: ` [attribute name ~ = contained field] `
2. Target pseudo class selector
-When the corresponding anchor is activated, use the href attribute of the a tag to connect the element anchor with the matching style
-` selector: target `
<style> div { width: 200px; height: 200px; font-size: 60px; text-align: center; border: 1px solid black; } div:target { background-color: yellow; } /*You can make a similar tab switching effect*/ div { display: none; } div:target { display: block; } </style> <a href="#Div1 "> select 1</a> <a href="#Div2 "> select 2</a> <a href="#Div3 "> select 3</a> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div>
3. Structural pseudo class selector
-First child matching parent element: ` parent element >: first child `
-Last child matching parent element: ` parent element >: last child `
-The nth child matching the parent element: ` parent element >: nth child (n) `
-Matches a label without any content (including text) inside: ` parent element >: empty `
-Unique child element matching parent element: ` parent element >: only child `
-Use the 'not()' parameter as the selector to negate all other selectors of the selector in the bracket, which is similar to negating: ` parent element >: not (unwanted selector) `
-[note] ` div: nth child (2) ` is different from ` div >: nth child (2) `. The first one specifies that the second child element is div, and the first one has no special reference
.box1 { background-color: red; height: 100px; } .box1 > div { height: 100px; width: 100px; float: left; } .box1 > :first-child { background-color: yellow; } .box1 > :last-child { background-color: plum; } .box1 > :nth-child(2) { background-color: purple; } .box1 > :empty { background-color: saddlebrown; } ul > :only-child { background-color: red; } /* Everyone except who */ ul > :not(.cqbhj) { color: green; }