1. A border

  • border-radius
  • Box-shadow: 10px 10px 5px #888888;
  • Border-image: url(border-.png) 30 30 round;

2. background(Two properties can be used together: background-position and background-repeat)

  • background-image
  • background-size
  • Background - origin: the content - box, padding - box, and border - boxWhat does it mean to align the picture relative to, to position the picture
  • Background-clip: padding-box and content-box;The drawing area of the background

3. The gradient(seewww.runoob.com/css3/css3-g…

  • Linear Gradients – Down/up/left/right/diagonal
  • Radial Gradients – defined by their centers

4. The text

  • text-shadow
  • box-shadow
  • text-overflow
  • Word wrap: break - word;Allows text wrapping
  • Word-break: keep-all or break-allWord break is not allowed

5. The font

  • @font-face

6. The 2 d transformation

  • translate()translation
  • rotate()rotating
  • scale()
  • skew()
  • matrix()

7. 3D

  • rotateX()
  • rotateY()

8. The transition

  • The transition: width 2 sUse hover to define width and transition to the specified width in 2 seconds.
  • transition-timing-function: linear;Represents uniform transition effect

9. animation

@keyframes myfirst { 0% {background: red; } 25% {background: yellow; } 50% {background: blue; } 100% {background: green; }} // Animation: myfirst 5s; useCopy the code

10. Multiple columns

  • column-countEtc.

11. The user interface

  • resize
  • box-sizing
  • outline-offset Shape modification (you can put another frame outside the frame)

12.The picture layout

img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } <img SRC ="paris.jpg" Alt ="Paris"Copy the code

13. Button, paging

Friends use component libraries more fragrant

14. Elastic box

-display:flex; Elastic layout online to find a special introduction of the post on the line

15. Multimedia Query

  • @media