Rounded corners: border – the radius

.box{ width: 100px; height: 100px; /* border-radius: 50%; Round */ border-radius: 20px; background-color: red; }Copy the code

Shadow: box – shadow

.box{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 20px yellow;
        background-color: red;
    }
Copy the code

Box-shadow: horizontal offset Vertical offset Blur radius Shadow color

Text shadow: text-shadow

 .box{
        width: 100px;
        height: 100px;
        text-shadow: 0 0 10px red;
        background-color: #222;
    }
Copy the code

Use the same as box-shadow.

Transition: the transition

Transition: CSS properties, time spent, effect curve (default ease), delay time (default 0)

Animation, animation

Animation: name of the animation, time spent per cycle, motion curve (default ease), animation delay (default 0), number of playback times (default 1), whether to play the animation backward (default normal), whether to pause the animation (default RUNNING), and more

  • Linear gradient
  • Offset (transform)