CSS3 round corners and gradients 2 common functions

CSS3 Round angle Explanation: Presumably everyone for the picture, the background round angle, are not unfamiliar with it,

Fillet syntax: Border-radius: Rounded corner value;

This value can be used: EM, ex,pt,px, percent;

Border-radius is almost like margin,padding.

Border-radius:lefttop,righttop,rightbottom,leftbottom. <div class= "Box1" ></div>.box1{width:200px;height:100px;border-radius:30px 5px;background: #f66f17; margin-top:30px;}

　　

<div class= "Box2" ></div>.box2{width:200px;height:100px;border-radius:30px 20px 10px 0px;background:# f66f17;margin-top:30px;}

　　

For rounded corners it should be easy to understand.

For percentages: The safest way to do this is to set the style and width of each rounded border to the same value, and avoid using percent values.

IE9 The following is not supported for this property

linear gradient:background:linear-gradient (Sets the gradient form, first color starting point, middle color point middle color position, end point color);

Linear: The type of gradient (linear gradient);

The form of the gradient: there are two ways of optional parameters-1, set the rotation angle, 0 degrees for the horizontal from left to right, 90 degrees is from top to bottom, starting from 0 degrees counter-clockwise transformation.

2, the use of keywords, left to represent from the right, the top represents from the top to the bottom, the same is right to the left, lefttop-from sitting up to the right, the same leftbottom,righttop,rightbottom.

The middle color and middle color position are optional parameters.

But to consider browser compatibility, let's write:

-webkit-gradient (linear,0 0,0 100%,from (starting color, to (end color));/*for Safari4+,chrome 2+*/

-webkit-linear-gradient (starting color, end color);/*for Safari 5.1+,chrome 10+*/

-moz-linear-gradient (starting color, end color);/*for firefox*/

-o-linear-gradient (starting color, end color);/*opera*/

Linear-gradient (start color, end color); */* Standard properties */

It's a hassle for IE, the old-fashioned.

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' Start color ', endcolorstr= "End Color"); /*ie6,ie 7*/

-ms-linear-gradient (starting color, end color);  /*ie8*/<div class= "Content1" ></div>.content1{width:500px;height : 300px;border-radius:10%;background: #ade691; Background:-webkit-linear-gradient (left, #88cfc3, #329e8c 30%, #096e5d ); Background:-moz-linear-gradient (left, #88cfc3, #329e8c 30%, #096e5d); background:filter:progid:d XImageTransform.Microsoft.gradient (startcolorstr= ' #88cfc3 ', endcolorstr= ' #096e5d '); /* Ie6,ie7 */-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #88cfc3 ', endcolorstr= ' #096e5d Background:linear-gradient (Lleft, #88cfc3, #329e8c 30%, #096e5d; float:left;}. Tit1{font-size:3em;font-weight:bold;color: #f00;}

　　

Repetitive linear gradient: repeating-linear-gradient attribute to replace linear gradient linear-gradient;

<div class= "Content2" ></div>.content2{width:500px;height:200px;background-image:- Webkit-repeating-linear-gradient (Red,green 40px, Orange 80px); Background-image:repeating-linear-gradient (Red, Green 40px, Orange 80px);}

　　

Radial gradient:radial-gradient (Sets the center of the gradient, the gradient shape gradient size, the starting color value, the middle color value middle color position, the end color)

Gradient center, optional parameters, such as 30px 20px refers to the left 30px distance from the upper side 20px, can be pixels, can be a percentage, or it can be a keyword, the default is the central location.

Gradient shape, optional parameter, can take value circle or eclipse "default"

Gradient size, cyclic parameters, can be value

Closest-side :

Specifies that the radial gradient has a radius length from the center to the nearest edge of the center

Closest-corner :

Specifies the radius length of the radial gradient from the center to the nearest corner from the center point

Farthest-side :

Specifies the radius length of the radial gradient from the center to the edge farthest from the center

Farthest-corner :

Specifies the radius length of the radial gradient from the center to the point farthest from the center

contain :

Contains, specifying the radius length of the radial gradient to be the closest point from the center to the center of the circle. Similar to Closest-side

cover :

Overrides, specifying the radius length of the radial gradient from the center to the point farthest away from the center. Similar to Farthest-corner

Circle Farthest-corner Circular Gradient, ellipse Farthest-corner oval gradient

<div class= "Content3" ></div>.content3{width:500px;height:200px;background-image:- Webkit-radial-gradient (Circle,hsla (120,70%,60%,.9), Hsla (360,60%,60%,.9)); Background-image:radial-gradient ( Circle,hsla (120,70%,60%,.9), Hsla (360,60%,60%,.9)); margin-top:20px;}

　　

CSS3 round corners and gradients 2 common functions