Common features of two CSS3 fillets and gradients

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.

<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;}

It should be easy to understand the rounded corners.
for percentages: the safest way to do this now is to set the style and width of each rounded border to the same value, and avoid using percent values.
IE9 This property is not supported
Linear gradient: background:linear-gradient (Sets the gradient form, the first color start point, the middle color point middle color position, the end point color);
Linear: The type of gradient (linear gradient);
The form of a gradient: there are two ways to choose a parameter-1, set the rotation angle, 0 degrees from left to right, 90 degrees from top to bottom, and start from 0 degrees counterclockwise.
2, the use of keywords, left to represent from the top to the right, top represents from the top to the bottom, the same way 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 (start color, end color),/*opera*/
linear-gradient (start color, end color);/* Standard properties */
It's a hassle for IE, old fashioned
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' Start color ', endcolorstr= "End Color"); /*ie6,ie 7*/
-ms-linear-gradient (start 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;}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!