function

  1. attr()Returns the attribute value of the selected element
< p > < a href = "111" > access a tag < / a > < / p > < div style = "width: 200 px; height:200px; border:1px solid pink"></div> <style> a:after {content: " (" attr(href) ")"; } div:before {content: " (" attr(style) ")"} </style>Copy the code

2. Calc () allows calculations to be performed to determine CSS property values

<div id="div1">Some text</div> <style> #div1 { width: calc(100% - 100px); // Height: 20px; border: 1px solid black; background-color: yellow; } </style>Copy the code
  1. cube-bezier(p0,p1,p2,p3)Function definition Cubic Bezier curve (velocity change)

P0 and P3 are the starting and ending points of the curve. P1(x1,y1) and P2(x2,y2) are the two points that can be dynamically changed together with the animation-timing-function and transition-timing-function properties

<div></div>

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0, 0.5, 0.2, 1);
}

div:hover {
  width:300px;
}
Copy the code
  1. hsl()Define different HSL colors

Hue: 0/360 is red, 120 is green and 240 is blue saturation: 0% gray, 100% full color lightness: -0% black, 50% normal and 100% white

Background - color: an HSL (120100%, 50%);Copy the code
  1. hsla()Different HSL colors with opacity

Alpha (transparency) 0.0 (fully transparent), 1.0 (completely opaque)

Background - color: hsla (120100%, 75%, 0.3)Copy the code
  1. linear-gradient(direction,color,color)Color transition

Direction: the direction

background-image: linear-gradient(to right, red , blue);
Copy the code
  1. radial-gradient(shape size at position, color,color);Radial gradient

Shape: A gradient shape

  • Ellipse (default ellipse)
  • Circle circle

Size: The size of the gradient

  • The closest – side side recently
  • Farthest – side farthest side
  • Closest -corner
  • Apsarp-corner = the farthest corner

Position: Gradient position

background-image: radial-gradient(circle closest-side at 60% 55% ,blue,green,yellow,black);
Copy the code
  1. repeating-linear-gradient(angle,side-or-corner,color,color)Repeated linear gradient
background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%)
Copy the code

  1. RGB () Red-green-blue model (RGB)

  2. Rgba () Red-Green-Blue-Alpha model (RGB)

Background - color: rgba (255,0,0,0.3)Copy the code
  1. var()Define a custom property named — bG-color

Note: Must begin with —

:root {
 --bg-color: pink; 
}

#div1 {
  background-color: var(--bg-color); 
}
Copy the code

Color (partially duplicate with function)

  1. Hexadecimal color
background-color: #ff0000
Copy the code
  1. Hex color with transparency
background-color: #ff000080
Copy the code
  1. RGB color
background-color: rgb(255, 0, 0)
Copy the code
  1. RGBA color
Background-color: rgba(255, 0, 0, 0.3);Copy the code
  1. An HSL color
background-color: hsl(120, 100%, 50%)
Copy the code
  1. HSLA color
Background-color: hSLA (120, 100%, 50%, 0.3)Copy the code
  1. Predefined/cross-browser color names
{background-color: blue; }Copy the code
  1. currentcolorThe keyword references the value of the element’s color attribute
#myDIV { color: blue; /* border: 10px solid currentcolor; /* Blue border color */}Copy the code

unit

  • Absolutely (not recommended)
  1. Cm cm
  2. Mm mm
  3. In inches
  4. Px pixel
  5. Pt point
  6. PC to send card
  • The relative
  1. Em font size relative to element
div { font-size: 30px; border: 1px solid black; } span {font-size: 0.5em; } <div>ont-size is set to 30px. <span>span <span>span <span>span </span> </div>Copy the code

  1. Ex relative to the x-height of the current font (rarely used), an EX equals half of an EM
div { font-size: 30px; border: 1px solid black; } span { font-size: 1ex; } <div>font size is set to 30px. <span> The span element inside the div element is 1ex. </span> </div>Copy the code

3. Ch relative to “0” (0) 4. Rem relative to the root element (font size)

html { font-size:16px; } div { font-size: 3rem; border: 1px solid black; } <p> Font size is 16px. </p> <div> The font size of this div element is 3rem. </div>Copy the code

  1. Vw 1% relative to the viewport width (if the display window width is 750px, 1VW is 7.5px)

  2. Vh 1% relative to viewport height (9px for 1VW if display window width is 900px)

  3. Vmin 1% of the smaller size of the viewport (1vmin = 1VW or 1vh, whichever is less)

  4. Vmax 1% of the larger size of the viewport (1vmin = 1VW or 1vh, whichever is less)

  5. % relative to the parent element