CSS3 fillet, shadow, gradient ...

One, border fillet border

Start with the upper left corner first
border-radius:30px; //can also write only one

Second, the Shadow

1. The shadow of the box Box-shadow

Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];
　　X-axis offset y-axis offset is required
Shadow Blur radius: This parameter is optional, its value can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the larger the value of the shadow the more the edge of the paste;
Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;
box-shadow:0px 0px 0px 10px; Shadow default black, outer shadow (outset);
　　Note: The inner shadow inset in addition to the first and last positions, other intermediate positions are invalid

. Box Div{background-color: #FFF; border:1px solid #ccc;}   . box1{box-shadow:0px 0px 0px 10px;}   . box2{box-shadow:0px 0px 10px 5px #059;}   . box3{box-shadow:4px 3px 4px 0px #005599;}   . box4{box-shadow:0px 0px 10px 0px #0f0 inset;}

2. Text Shadow Text-shadow

Text-shadow: Horizontal offset vertical offset blur distance (cannot be negative) shadow color; <br/>
text-shadow:3px 3px 2px #333; <br/>
Can write multiple groups: text-shadow:0 0 3px #789234, 0 0 3px #00ff99, 0 0 3px #7ff09e;

. Box Div{background-color: #fff; border:1px solid #ccc; width:188px;font-size:30px;font-weight:900;}. Box1{color: #fff; text-shadow:0 0 5px #99FFFF, 0 0 15px #99FFFF, 0 0 25px #99FFFF; }.box2{text-shadow:0 0 5px #30C; color:transparent; }.box3{text-shadow:-1px-1px 0 #fff, 1px 1px 0 #000;}. Box4{color: #fff; text-shadow:1px 0px 0 #60F, 0px 1px 0 #60F, -1px 0px 0 #60F, 0px-1px 0 #60F;}. Box5{color: #fff, text-shadow:0px 1px 0 #000, 0px 2px 0 #333, 0px 3px 0 #060606, 0px 4px 0 #020202, 0px 5px 0 #252525, 0px 6px 1p./----------- x Rgba (0,0,0,0.5), 0px 5px 4px rgba (0,0,0,0.7), 0px 2px 6px rgba (0,0,0,0.6);}. box6{text-shadow:3px 3px 0px #00BBFF;}

Third, gradient

Linear gradient: linear-gradient (direction, color 1, color 2); Syntax: background:linear-gradient (direction, color-stop1, color-stop2, ...);
Radial gradient: radial-gradient (color 1 percent 1, color 2 percent 2, color 3 percent 3); percentage is the start position, no color evenly spaced

Linear-gradient (to Left,red,orange,yellow,green,blue,indigo,violet);
Radial-gradient (Red,yellow 10%,green 30%);

Direction of linear gradient: except to left;to right;to top;to bottom;to top left (from bottom-right corner to top-top);
You can also use a specific angle: 90deg (want to right), 0deg equivalent to top; The default direction is from top to bottom.

Radial gradient:
Additive Properties: Circle (Circle), percentage of color start position, starting position such as: bottom left, percentage of center position

CSS3 fillet, shadow, gradient ...