The selector

  • 1. Basic selectors:
    • *
    • #
    • .
    • Descendant selector
    • Child selector
    • Adjacent brother (+)
    • All brothers (~)
    • Combinatorial selector (,)
  • Property selector
    • div[class]{Just use the attribute name to select the element that contains the attribute name}
    • div[class=”box1″]{Specify that the attribute name = attribute value must be identical}
    • div[class=”box”]{The property name contains the specified property value as long as the property value contains the specified property value character *}
    • div[class~=”box”]{Split the attribute value by space and then determine whether it contains the attribute value}
    • div[class^=”box”]{Attribute values start with what}
    • div[class$=”box2″]{Attribute values end with what}
    • div[class|=”box”]{The property name is equal to box or prefixed with box-}
  • Dynamic pseudo-class selector
    • a:hover{The mouse on}
    • a:focus{Getting focus is typically used on form elements}
    • a:active{Mouse click effect}
    • a:visited{Usually used in anchor point links where links are accessed}
    • a:link{Commonly used for anchor link links that have not been accessed}
  • UI pseudo-class selectorInternet Explorer 6-8 does not support these three
    • input:disabled{}
    • input:enabled{}
    • input:checked{}
  • Structure pseudo-class selector
    • div:first-child{Select the first child element}
    • div :last-child{Select the last child element}
    • div :nth-child(2){ 
      * *nth-child(n) * *nth-child(3n)* *nth-child(2n)* *nth-child(2n+1)*}Copy the code
      • div :nth-last-child(1){Pour several}
      • div :nth-of-type(2){The ab initio number of the same type}
      • div :nth-last-of-type(1){Count from the end}
      • ul :first-of-type{The first of its kind}
      • ul :last-of-type{The last one of its kind}
      • div :only-child{He had only one child in his father’s class}
      • div :only-of-type{He was the only father of his kind}
      • div :empty{An element inside a div without any content}
  • Pseudo-element selectors (pseudo-elements :: : will do)
    • :after
    • :before
    • :first-line
    • :first-letter

The gradient

Linear gradient

  • From the top to the bottom
  • From the bottom to the top:
  • From left to right: left to right
  • From right to left: left, to right
  • From the bottom right to the top left:
  • From the bottom left to the top right:
  • Custom gradient colors followed by percentages

Radial gradient

  • 50px 200px
  • circle
  • ellipse
  • 200px 200px at 0px 0px
  • circle at top
  • circle at 0 50%
  • circle closest-side/closest-corner
  • circle farthest-side/farthest-corner
  • -webkit-repeating-radial-gradient

A border

X-show (x y a b c I)

X: horizontal offset positive: Negative value on the right: Negative value on the left Y: vertical offset positive: Negative value on the bottom: upper a: Blur radius B: extension radius C: Color I :inset Set inner shadowCopy the code

border-radius

Border-radius :50px 70px 60px/80px 90px 70px; border-top-left-radius: 30px 40px; Half ellipticalCopy the code

border-images

Stretch Stretch Default value round Tiling repeat replicationCopy the code

The button

.border-image-btn{ display: inline-block; border: 18px solid green; border-width:0 18px ; border-image: url(.. /img/button_sprite.png) 0 18 50 18; text-decoration: none; padding: 13px 10px 17px; color:#fff;font-size: 16px; font-weight:bold; line-height: 15px; margin: 10px; } .border-image-btn:hover{ border-image: url(.. /img/button_sprite.png) 50 18 0 18; text-decoration: none; }Copy the code

background

background-origin

Up or down, left or right, just beyond the border

  • Border-box starts at the outer border of the border
  • The padding-box starts at the outer edge of the padding which is counting the padding
  • The content-box starts at the inner margin of the padding

background-clip

  • border-box
  • padding-box
  • content-box

### webkit-background-clip: text; -webkit-text-fill-color: transparent;

###background-size

  • Auto default values
  • 100% 100%
  • Cover Enlarges the image to fit all over the container. The same ratio of width to height will distort the image
  • The purpose of the presentation is to contain all the pictures in the container

Multi – background picture, make frame

.box{ width: 240px; font-size: 25px; The line - height: 1.5; text-align: center; Border: 20 px solid rgba (104104142, 5); padding: 60px 40px; border-radius:10px ; color:#f36;background: url(.. /img/bg-tl.png) no-repeat top left, url(.. /img/bg-tr.png) no-repeat top right, url(.. /img/bg-br.png) no-repeat bottom right, url(.. /img/bg-bl.png) no-repeat bottom left, url(.. /img/bg-repeat.png) repeat left top;
            background-origin: border-box,border-box,border-box,border-box,padding-box;

        }Copy the code

The text

text-overflow:clip/ellipsis

  • Clip: Indicates that the omission tag is not shown is simply clipping, but within a certain height range with overflow: hidden
  • Overflow: hidden white-space: nowrap;

word-wrap:normal|break-word

  • Norma: The default controls continuous text wrapping (allowing content to burst container boundaries)
  • Break -word: break the contents at the container boundary (do not truncate English words such as aaaaaa)

word-break:normal|break-all|keep-all

  • Word-break :normal Default value Chinese word break No English word break
  • Word-break :break-all can forcibly truncate English newlines
  • Word-break :keep-all Disallow: disconnection. Chinese takes the entire line wrap of a Chinese character or phrase within the punctuation mark

text-show

  .text-wrap{
            background-color: # 665757;
            width: 600px;
            margin: 15px auto;
            padding: 10px 0;
            border: 5px solid #ccc;
            position: relative;
            font-size: 50px;
            color: #f7edf7;clear: both; text-align: center; letter-spacing: 5px; box-shadow: 0 0 0 RGB (188,178,188), 1px 1px 0 RGB (173,163,173), 2px 2px 0 RGB (157,147,157), 3px 3px 0 RGB (142,132,142), 4px 4px 0 RGB (126,116,126), 5px 5px 0 RGB (111,101,111), 6px 6px 5px Rgba (0,0,0 0.4); } .text2{ text-shadow: 0 0 0 RGB (188,178,188), 1px-1px 0 RGB (173,163,173), 2px-2px 0 RGB (157,147,157), 3px-3px 0 RGB (142,132,142), RGB (4px -4px 0 RGB (126,116,126), 5px -5px 0 RGB (111,101,111), 6px -6px 0 RGB (95,85,95), 7px -7px 0 RGB (79,69,79), 8px-8px 7px rgba(0,0,0,.2), 8px-8px 1px rgba(0,0,0,.5), 0px 0px 7px rgba(0,0,0,.3); }. Text1 :active{box-shadow: 0 0 0 RGB (188,178,188), 1px 1px 0 RGB (173,163,173); top:14px; }Copy the code

The fonts icon

icomoon.io/

The button

  .btn-bevel{
            border: none;
            border-radius: 4px;
            padding: 10px 25px 12px;
            font-family: arial,helvetica,sans-serif;
            font-size: 13px;
            color: #fff;text-decoration: none; text-align: center; display: inline-block; margin: 10px; cursor: pointer; Text-shadow: 0 1px 1px rgba(0,0,0,0.4); Background: RGB (120107201); background: -webkit-linear-gradient (top,rgba(120,107,201,1), rgba(120,107,201,0.8), rgba(120,107,201,0.5), rgba(120,107,201,0.3));  Box-shadow: rgba(120,107,201,0.5) 1px 6px 0, rgba(0,0,0,0.3) 1px 10px 3px; } .btn-bevel:active{ position: relative; top:5px; Box-shadow: rgba(120,107,201,0.7) 0px 1px 3px; } .btn{ border: none; outline: none; display: inline-block; width: 80px; height: 80px; border-radius:50% ; margin-right: 90px; font-size: 0; background:#e982ab;Box-shadow :0 1px 5px rgba(255,255,255,0.5) inset, 0-2px 5px rgba(0,0,0,0.5) inset, 0 3px 8px rgba(0,0,0,0.8); background: -webkit-radial-gradient (closest-corner circle at top,#f28fb8,#e982ab,#ec568c);
            }
     .btn:hover:after{
            color: #fff;
            text-shadow:0 1px 20px #fccdda,1px 0px 15px #fccdda ;
          }
     .btn:active{
            box-shadow:0 2px 2px rgba(0,0,0,0.5) inset,
            0 -3px 10px rgba(0,0,0,0.1) inset,
            0 2px 4px rgba(255,255,255,0.8);
            background: -webkit-radial-gradient
            (closest-corner circle at bottom,
            #f28fb8,#e982ab,#ec568c);
            }Copy the code

The color

RGB (0-255 red,0-255 green,0-255 blue) RGBA (0-255 red,0-255 green,0-255 blue,0 opacity) HSL(H tone,S saturation,L brightness) HSLa(H tone,S saturation,L brightness, H opacity) HSL color mode It is an industrial standard Hue: 0(360) red 60 yellow 120 green 180 sky blue 240blue 300 purplish red the center can be arbitrarily selected to represent other colors Saturation 0-100% Lightness 0% - 100%.Copy the code

Filter filter

  • Grayscale (1) : gray
  • Sepia brown (1)
  • Saturate the saturation (500%)
  • Hue -rotate(180deg) Hue reversal
  • Invert (1) the color
  • The transparency of the opacity (0.6)
  • Luminance brightness (250%)
  • Contrast contrast (200%)
  • The blur (5 px) ambiguity
  • Drop-shadow (2px 3px 5px rgba(0,0,0,0.8)

2 d deformation

translation

TranslateX (x) translateY(y) translateX(x) translateY(y)Copy the code

The zoom

Scale (n) n:(0-1) scaleX(nX) scaleY(ny)Copy the code

rotating

   rotate(deg)Copy the code

tilt

Skew (xDEg, yDEg) If you pass a value skewX(xDEg) skewX(xDEg) skewY(ydeg)Copy the code

Order problem

The transition

transition: opacity 2s 1s ease-out ; -Dan: Ease from slow to faster and ease-out ease-in-out, ease-in, ease-out, ease-inCopy the code

The 3 d deformation

transform-style: preserve-3d; TranslateZ rotateX, rotateY, rotateZ Rotate3DCopy the code