Share an example code for CSS3 fillet and gradient features

This article mainly introduces the CSS3 fillet and gradient 2 kinds of common functions of the relevant information, the need for friends can refer to the following

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;
Advantages of CSS3 Fillet
For a traditional fillet generation scenario, you must use multiple pictures as background patterns. The advent of CSS3 makes it unnecessary to waste time making these images, and there are several other advantages:
* Reduce the amount of maintenance. Image file generation, updating, writing Web page code, these jobs are no longer needed.
* Improve Web page performance. The loading speed of the Web page will be faster because there is no need to make additional HTTP requests.
* Increased visual reliability. In some cases (network congestion, server error, slow speed, and so on), the background image will fail to download, resulting in poor visual performance. This is not the case with CSS3.
This value can be used: EM, ex,pt,px, percent;
Border-radius is almost like margin,padding.
Border-radius:lefttop,righttop,rightbottom,leftbottom.

The code is as follows:

<p class= "Box1" > </p> box1{width:200px;height:100px;border-radius:30px 5px;background: #f66f17; margin-top:30px;}

<p class= "Box2" ></p>. 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 (start 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*/

<p class= "Content1" ></p>. 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: repeating-linear-gradient attribute to replace linear gradient linear-gradient;

<p class= "Content2" ></p>. 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

<p class= "Content3" ></p>. 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;}

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial