1. The rounded corners

Border-radius: you can set different rounded corners in four directions

div{ border:2px solid; border-radius:25px; } /* border-radius:25px 25px 25px 25px; The first value is the top left corner, the second value is the top right corner, the third value is the bottom right corner, and the fourth value is the bottom left corner border-top-left-radius:30px; border-top-right-radius:30px; border-bottom-right-radius:30px; border-bottom-left-radius:30px; border-radius: 50px/15px; /* Ellipse fillet */ */Copy the code
2. The shadow

Box-shadow: Can set unilateral shadow effect, adjust shadow site

div{ box-shadow: 10px 10px 5px #888888; } /* box-shadow: 0px -10px 0px rgba(222,221,233,0), /* top shadow */ *x coordinate value y coordinate value blur degree shadow extended length color */ -10px 0px 0px 0px rgba(220,240,230,0), /* left shadow */ 10px 0px 0px rgba(210,220,220,0), /* right shadow */ 0px 10px 30px 0px rgba(220,220,220,0.1); /* Shadow */ */Copy the code
3. Picture borders

Border-image: Creates a border with the image

div{
      border-image:url(border.png) 30 30 round;
      -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
      -o-border-image:url(border.png) 30 30 round; /* Opera */
    }
Copy the code