Common functions of CSS3 and common functions of CSS3

Common functions of CSS3 and common functions of CSS3

With the upgrade of the browser, CSS3 can be applied in practical use.

However, different browsers have different CSS3 implementations, and compatibility is a big problem. Last week, YDN introduced the CSS3 Please website, which summarizes some common functions.

The following is a detailed description of these methods. All the code has been verified by Firefox 3.6 and IE 8.0, and the error in the original text has been corrected.

1. Rounded Corner)

.box_round {
　　-moz-border-radius: 30px; /* FF1+ */
　　-webkit-border-radius: 30px; /* Saf3+, Chrome */
　　border-radius: 30px; /* Opera 10.5, IE 9 */
}

The implementation of the rounded corner is relatively simple. You only need to set a radius value. Unfortunately, currently, all IE does not support CSS rounded corners. You have to wait until IE 9.

2. Box Shadow)

.box_shadow {
　　-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */
　　-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */
　　box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */
　　filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */
}

-The settings of moz-box-shadow,-webkit-box-shadow, and box-shadow are the same. There are four parameters with meanings: X axis offset, Y axis offset, shadow blur, and shadow color.

IE 6 ~ 8. to use its own filter, you need to set three parameters: offX (X axis offset value), offY (Y axis offset value), and Color (shadow Color ).

3. Gradient)

.box_gradient {
　　background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
　　background-image: -webkit-gradient(linear,left top,  left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
　　filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */
}

First look at Firefox.

-moz-linear-gradient(top, #444444, #999999);

-Moz-linear-gradient has three parameters. The first parameter indicates the direction of the linear gradient, top is from top to bottom, left is from left to right, if defined as left top, it is from top left to bottom right. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors.

-webkit-gradient(linear,left top,  left bottom, color-stop(0, #444444),color-stop(1, #999999));

-Webkit-gradient is the implementation of the gradient by the webkit engine. There are five parameters in total. The first parameter indicates the gradient type (type), which can be linear (linear gradient) or radial (radiation gradient ). The second and third parameters are both a pair of values, indicating the gradient start point and end point respectively. These values can be expressed in coordinates or key values, such as left top (upper left corner) and left bottom (lower left corner ). The fourth and fifth parameters are two color-stop functions. The color-stop function accepts two parameters. The first parameter indicates the gradient position. 0 indicates the starting point, 0.5 indicates the midpoint, and 1 indicates the ending point. The second parameter indicates the color of the gradient.

DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');

IE uses a filter to implement gradient. StartColorstr indicates the starting point color, and endColorstr indicates the ending point color. GradientType indicates the gradient type. 0 is the default value, indicating the vertical gradient. 1 indicates the horizontal gradient.

4. opacity)

Normally, upper-layer objects overwrite lower-layer objects.

However, if you change the color of the Upper-layer object to transparent, you can see the lower-layer object through it.

.box_rgba {
　　background-color: #B4B490;
　　background:transparent;
　　filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
　　zoom: 1;
　　background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
}

First look at the first line.

background-color: #B4B490;

This is the preparation color of the object, that is, the color of the opacity. This color is displayed if the browser does not support transparency.

background:transparent;
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
zoom: 1;

These lines are specifically written for IE, and mainly use the DXImageTransform. Microsoft. gradient filter. We need to set startColorstr and endColorstr for it ). The two values are the same when the monochrome is transparent. It should be noted that their values are an octal hexadecimal value. The first two digits indicate alpha channel values, 00 indicates completely transparent, and FF indicates completely opaque; the last six digits are the RGB values of the color.

background-color: rgba(180, 180, 144, 0.6); 

Almost all other browsers except IE support the rgba function. It has four parameters, the first three are RGB values of a color, and the fourth is transparency, which is set to 0.6.

5. rotation)

.box_rotate {
　　-moz-transform: rotate(7.5deg);  /* FF3.5+ */
　　-o-transform: rotate(7.5deg);  /* Opera 10.5 */
　　-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
　　filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');
　　-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */
}

Except IE, all other browsers use the rotate function to rotate an object. For example, rotate (7.5deg) indicates clockwise rotation of 7.5 degrees (degree ).

IE requires a complex filter DXImageTransform. Microsoft. Matrix. It accepts a total of five parameters. The first four parameters need to calculate the trigonometric function, and then write them as M11 = cos (rotation), M12 =-sin (rotation), M21 = sin (rotation ), m22 = cos (rotation), where rotation indicates the rotation angle. If the rotation is 7.5 degrees clockwise, rotation is 7.5. The fifth parameter, SizingMethod, indicates the re-painting method, 'autoexpand' indicates automatically expanding to the new boundary.

In addition to this filter, IE also has a slightly simpler filter DXImageTransform. Microsoft. BasicImage (rotation = x ). X can only be set to 1, 2, 3, and 0, respectively, indicating that the values are 90 degrees, 180 degrees, 270 degrees, and 360 degrees clockwise.

Vi. font-face)

Some special fonts may be used when designing webpages. If your machine is not installed, text can only be displayed in normal font.

In this case, the user's browser can download the server font on its own, and then display the effect the designer wants.

@font-face {
　　font-family: 'MyFont';
　　src: url('myfont.eot');  /* IE6+ */
　　src: local('myfont.ttf'), 
　　url('myfont.woff') format('woff'),  /* FF3.6 */
　　url('myfont.ttf') format('truetype');  /* FF3.5+, Saf3+,Chrome,Opera10+ */
}

The first line of code:

font-family: 'MyFont';

Indicates a name for this font, which can be set at will. Here I use MyFont.

src: url('myfont.eot');
 

This line indicates the font position. Since ie only supports the eot font on the server side, this line is dedicated to ie.

src: local('myfont.ttf'), 
　　url('myfont.woff') format('woff'),  
　　url('myfont.ttf') format('truetype');

Local () indicates finding the font on the local machine (client). If the local machine has been installed, you do not need to download it. Url () indicates the font position on the server. format () indicates the font format. Firefox 3.5 supports TrueType and OpenType fonts, while Firefox 3.6 adds WOFF fonts. Other Webkit-based browsers (sarif, opera, and chrome) currently only support truetype.

Then, you can write it in this way.

h2{ font-family: "MyFont"; }

Note that the font file and the webpage file must come from the same domain name and comply with the browser's "same-origin policy ". In addition, because the Chinese font file is too large, the server font is obviously only applicable to English fonts.

VII. Others

With css3, you can also perform transform (deformation), including skew (distortion), scale (scaling), and css transitions (dynamic transformation ). These contents will be added later.