Detailed description of common functions of css3 rounded corner and gradient, and detailed description of css3 rounded corner gradient

Detailed description of common functions of css3 rounded corner and gradient, and detailed description of css3 rounded corner gradient

Css3 rounded corners: I'm sure you are familiar with image and background rounded corners,

Rounded corner Syntax: border-radius: rounded corner value;

This value can be em, ex, pt, px, percentage;

Border-radius is similar to margin and 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;}

　　

It should be easy to understand the rounded corner.

For percentage: currently, the safest way is to set the style and width of each rounded border to the same value and avoid using the percentage value.

IE9 or lower does not support this attribute

Linear Gradient:Background: linear-gradient (set the gradient form, the starting point of the first color, the position of the middle color, and the ending color );

Linear: Gradient Type (Linear gradient );

Gradient form: the optional parameter can be set in two ways-1. Set the rotation angle. 0 degrees indicates that the level is left to right, 90 degrees is from top to bottom, and the clockwise conversion starts from 0 degrees.

2. Use keywords. left indicates from left to right, top indicates from top to bottom, right indicates from right to left, and lefttop indicates from top to bottom. Similarly, leftbottom, righttop, and rightbottom are supported.

The intermediate color and the intermediate color position are optional.

However, we need to consider the compatibility of the browser. Let's write:

-Webkit-gradient (linear, 0 100%, from (Starting color, to (ending color);/* for Safari4 +, Chrome 2 + */

-Webkit-linear-gradient (start color, end color);/* for Safari 5.1 +, Chrome 10 + */

-Moz-linear-gradient (start color, end color);/* for firefox */

-O-linear-gradient (start color, end color);/* Opera */

Linear-gradient (start color, end color);/* standard attribute */

It is a headache for Internet Explorer.

Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = 'start color', endColorstr = "End color");/* IE6, IE 7 */

-Ms-linear-gradient (start 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: DXImageTransform. 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: the repeating-linear-gradient attribute replaces the 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 (set the center of the gradient, gradient shape gradient size, starting color value, intermediate color value, and ending color)

Gradient center. An optional parameter. For example, 30px 20px indicates 20px distance from the left side to the top side. It can be a pixel, a percentage, or a keyword. The default value is the center position.

Gradient shape. optional parameter. Optional values: circle or eclipse [Default]

Gradient size, cyclable parameter, value options

Closest-side:

Specify the radius length of the radial gradient to the edge closest to the center of the circle.

Closest-corner:

Specify the radius length of the radial gradient from the center of the center to the nearest corner of the center.

Farthest-side:

Specify the radius length of the radial gradient as the farthest side from the center of the center to the center of the center.

Farthest-corner:

Specify the radius length of the radial gradient to the farthest angle from the center of the center to the center of the center.

Contain:

Contains, specify the radius length of the radial gradient from the center to the closest point to the center. Similar to closest-side

Cover:

Overwrite, specify the radius length of the radial gradient from the center to the farthest point from the center. Similar to farthest-corner

Circle farthest-corner round gradient, ellipse farthest-corner elliptical 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;}