Although the styles are relatively simple, you won’t be able to remember them when you use them. Let me list the commonly used ones here to deepen your memory.
Border style:
- border-radius: Sets the rounded border of the element.
- box-shadow: Add a shadow effect to the element.
- border-image: Use an image to define the style of the border.
Gradient background:
- linear-gradient: Creates a linear gradient background.
- radial-gradient: Create a radial gradient background.
Text Effects:
- text-shadow: Add a shadow effect to the text.
- text-overflow: Controls how text is displayed when it overflows.
- word-wrap: Controls the wrapping of long words or URLs.
Transition effect:
- transition: Add a transition effect to the element, which can make a smooth transition when the attribute changes.
- transform: Perform transformation operations such as rotation, scaling, tilting or translation on the element.
Animation effect:
- @keyframes: Define animation keyframes.
- animation: apply animation to the element, control the duration, delay and other properties of the animation.
Box model:
- box-sizing: Controls the box model of the element, which can be set to border-box or content-box.
- flexbox: Use elastic box layout to achieve flexible layout effects.
Responsive design:
- media queries: apply different styles according to different devices or screen sizes.
- rem unit: Use the font size relative to the root element to define the size for responsive layout.
Of course, the css3 style is very powerful and there are many styles. Here are just a few major categories.