CSS3 Border-radius, Box-shadow and gradient.

First, Border-radius

Border-radius is used to add rounded borders for a wide range of uses.

1) A value that represents Four Corners

{    /**/    -webkit-border-radius: 12px;                 /*  */    -moz-border-radius: 12px;                   /*  */    border-radius: 12px;}

2) Three values, the middle value represents top right and bottom left

{    /**/    border-radius: 5px 20px 5px;}

3) Slash sets the second set of values

"/" refers to the horizontal radius of the fillet, and the "/" is the vertical radius of the fillet, both of which follow the order principle of the TRBL (upper right and bottom left). The upper-left corner is 10px/40px, the upper-right corner is 20px/30px, and so on.

{    Border-radius: 10px 20px 30px 40px/40px 30px 20px 10px/*/ }

4) Background map will be cropped

{    background: url (img.jpg) no-repeat right bottom;     Border-radius: 12px;}

Second, Box-shadow

Box-shadow adds one or more shadows to the box. This property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset keyword. The value of the omitted length is 0.

Box-shadow: H-shadow v-shadow blur spread color inset;

The offset direction is as follows:

1) Single-layer shading

{    /**/    -webkit-box-shadow: 3px 3px 5px 6px #ccc;                    /*  */    -moz-box-shadow:    3px 3px 5px 6px #ccc;                    /*  */    box-shadow:         3px 3px 5px 6px #ccc;  }

2) Multiple Shadows

Black: With Blur and shadow dimensions

Purple and yellow: only horizontal and vertical

Red and blue: horizontal, vertical, and blurry

{    box-shadow: 0 0 10px 5px black,                 40px-30px purple,                 40px 30px 50px Red,                 -40px 30px yellow,
    -40px-30px 50px blue;}

Third, CSS3 Gradient

1) linear-gradient (linear gradient)

During the process of creating a gradient, you can specify multiple intermediate color values, which are called color labels. Each color label contains one color and one position, and the browser fades from the color of each color label to the next to create a smooth gradient.

The gradient editor in Photoshop looks like this:

CSS compatibility is as follows :

The individual browser syntax is as follows:

-moz-linear-gradient( [< Point>||<Angle>,]?<Stop>,<Stop>[,<Stop>]*)-webkit-linear-gradient([< Point>||<Angle>,]?<Stop>,<Stop>[,<Stop>]*)//latest published writing Grammar -webkit-gradient(<type>,< Point>[,<radius>]?,< Point>[,<radius>]? [,<Stop>]*)//old grammar writing rules -o-linear-gradient([< Point>||<Angle>,]?<Stop>,<Stop>[,<Stop>]); /* Opera 11.10+ */filter: Progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #1471da , endcolorstr= #1C85FB);/*ie<9>*/-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #1471da, Endcolorstr= #1C85FB) ";/*ie8+*/linear-gradient([[<Angle>| To<Side-or-corner>] ,]?<Color-stop>[,<Color-stop>]+)

Here is an example, corresponding to the syntax one by one above, the same order:

{ background: -moz-linear-gradient (Top,  rgba (255,203,72,1) 0, Rgba (255,156,35,1) 50%);
background: -webkit-gradient (linear, left top, left bottom, Color-stop (0%,rgba (255,203,72,1)), Color-stop (50%,rgba (255,156,35,1))); background: -webkit-linear-gradient (Top,  rgba (255,203,72,1) 0%,rgba (255,156,35,1) 50%);
background: -o-linear-gradient (Top,  rgba (255,203,72,1) 0%,rgba (255,156,35,1) 50%);

Filter: progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffcb48 ', endcolorstr= ' #ff9c23 ', gradienttype=0); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #ffcb48, Endcolorstr= #ff9c23) ";

background: linear-gradient (to bottom,  rgba (255,203,72,1) 0%,rgba (255,156,35,1) 50%);
}

The standard syntax requires a to for the direction, and the direction of writing is opposite to the other, and if it is top, this is bottom.

The second color I used a 50% to start the gradient starting position

You can also set the angle , which is an angle that is generated by the horizontal line and the gradient lines, counterclockwise. Therefore, using 0deg will result in a left-to-right transverse gradient, while 90 degrees will create a vertical gradient from the bottom to the top.

-filter,-ms-filter and -webkit-gradient can't be used.

{    background: -moz-linear-gradient (45deg,  rgba (255,203,72,1) 0, Rgba (255,156,35,1) 50%) ;     background: -webkit-linear-gradient (45deg,  rgba (255,203,72,1) 0%,rgba (255,156,35,1) 50%) ;     background: -o-linear-gradient (45deg,  rgba (255,203,72,1) 0%,rgba (255,156,35,1) 50%) ;     background: linear-gradient (45deg,  rgba (255,203,72,1) 0%,rgba (255,156,35,1) 50%) ;}

2) radial-gradient (radial gradient)

CSS Compatibility is similar to the linear gradient above.

The individual browser syntax is as follows:

-moz-radial-gradient([<bg-position>||<Angle>,]? [<Shape>||<size>,]?<Color-stop>,<Color-stop>[,<Color-stop>]*); -webkit-radial-gradient ([<bg-position>||<Angle>,]? [<Shape>||<size>,]?<Color-stop>,<Color-stop>[,<Color-stop>]*); -o-radial-gradient ([<bg-position>||<Angle>,]? [<Shape>||<size>,]?<Color-stop>,<Color-stop>[,<Color-stop>]*); radial-gradient ([ [ <Shape>||<size>] [at<position>]? , | At<position>, ]?<Color-stop>[ ,<Color-stop>]+)

Here is an example that corresponds to syntax one by one above:

{    background: -moz-radial-gradient (10px 20px, #f00, #ff0 40%, #080);     background: -webkit-radial-gradient (10px 20px, #f00, #ff0 40%, #080);     background: -o-radial-gradient (10px 20px, #f00, #ff0 40%, #080);     background: radial-gradient (at 10px 20px, #f00, #ff0 40%, #080);}

Standard syntax requires an at for coordinates;

The second color I used a 40% to start the gradient starting position

Demo Download:

http://download.csdn.net/detail/loneleaf1/9146297

Resources:

Https://css-tricks.com/almanac/properties/b/border-radius/css-tricks Border-radius

http://www.cnblogs.com/mofish/p/3832136.html Border-radius parameters from CSS3 writing order

Https://css-tricks.com/almanac/properties/b/box-shadow/css-tricks Border-shadow

http://www.basecss.net/article/box-shadow.html [Translate]box-shadow, CSS3 one of the best features

Http://www.webhek.com/css-box-shadow-property CSS Shadow effect (Box-shadow) Usage fun explanation

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html CSS3 linear gradient (linear-gradient)

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html CSS3 Radial Gradient (radial-gradient)

Http://www.w3cplus.com/css3/new-css3-linear-gradient.html again CSS3 gradient--linear gradient

http://blog.csdn.net/playboyanta123/article/details/9303857 radial-gradient CSS3 's egg-ache radial gradient

CSS3 Border-radius, Box-shadow and gradient.