Some new features of css3

background:rgba(254, 255, 200, 0.75);

For example, as shown in the above code, the first three parameters are the three primary colors of R, G, and B, and the range is 0-255. The fourth parameter is background transparency, ranging from 0-1, such as 0.5 representing 50% transparency. This attribute allows us to achieve a translucent glass effect like Win7 in the browser.

css3 rounded corner sample code

/*FireFox syntax*/

-moz-border-radius: 6px 6px 6px 6px;

-moz-border-radius-topright: 6px;

-moz -border-radius-topleft: 6px;

-moz-border-radius-bottomright: 6px;

-moz-border-radius-bottomleft: 6px;

/*WebKit core browser syntax*/

-webkit-border-radius: 6px 6px 6px 6px;

-webkit-border-top-right-radius: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-bottom -right-radius: 6px;

-webkit-border-bottom-left-radius: 6px;

/*CSS standard syntax*/

border-radius:6px 6px 6px 6px;

border-top- right-radius: 6px;

border-top-left-radius: 6px;

border-bottom-right-radius: 6px;

border-bottom-left-radius: 6px;

As shown in the above code, The effect of the four corners can be specified by a line of code border-radius: 6px 6px 6px 6px, where the four parameters represent from left to right: upper left corner, upper right corner, lower right corner, and lower left corner. You can also specify the effect of each corner separately like border-top-right-radius: 6px;.

Gradient color

background: -moz-linear-gradient(

center top,/* The coordinates of the gradient start*/

rgba(254, 216, 80, 0.75),/* The gradient start color */

rgba(230, 125, 30, 0.75) 50%,/* Middle gradient color*/ www.2cto.com

rgba(254, 235, 121, 0.75)/* Gradient end color*/ ) repeat scroll 0 0 transparent;

As shown in the above code, Mozilla uses the -moz-linear-gradient tag to represent linear gradients. The first parameter represents the coordinate where the gradient starts, which can be a coordinate value, or a value such as top, bottom, left, right, center, etc. The following parameters are the color values ​​of the gradient, there is no limit to the number, and they are separated by commas. Each color value can be a normal hexadecimal color or an RGBA color value. Each color can also be followed by a percentage or a decimal between 0-1, indicating the proportion of that color in the entire gradient.

Webkit gradient syntax

background:-webkit-gradient(

linear,/* gradient type linear*/

left top,/* coordinates where the gradient starts*/

left bottom, /* The coordinates of the end of the gradient*/

from(rgba(254, 216, 80, 0.75)),/* The starting color of the gradient*/

to(rgba(254, 235, 121, 0.75)),/* Gradient End color*/

color-stop(0.5,rgba(230, 125, 30, 0.75))/* Middle color of gradient*/

)

repeat scroll 0 0 transparent;

Webkit browser uses -webkit The -gradient attribute represents a gradient. The first parameter is the gradient type, usually linear. The second parameter is the coordinate where the gradient starts, the same as Mozilla's first parameter. The third parameter is the coordinate of the end of the gradient. The fourth and fifth are the start and end colors of the gradient respectively, which can be hexadecimal color values ​​or RGBA color values. There can be an infinite number of final color-stop attributes, separated by commas after the first five parameters, indicating the gradient color in the middle of the change. In the color-stop attribute, the first parameter is the proportion of the gradient color, which can be a decimal from 0-1 or a percentage; the second parameter is the color value of the gradient, which can also be a hexadecimal color. value or RGBA color value.

Transform

Transform is another blockbuster of CSS after linear color gradient. Usually using CSS and HTML, it is impossible for us to rotate or tilt HTML elements at a certain angle. In order to make the element look more three-dimensional, we have to make this effect into a picture, which limits many dynamic application scenarios. The introduction of the Transform attribute enables functions that we usually had to use vector drawing methods such as SVG to achieve with just a simple CSS attribute. In CSS3, Transform properties mainly include rotate rotation, scale scaling, translate coordinate translation, skew coordinate tilt, and matrix matrix transformation. Let's take a look at how each attribute is used.

/*Webkit Core Browser*/

-webkit-transform: rotate(-90deg);

-webkit-transform: scale(2);

-webkit-transform: scale(2, 1);

-webkit-transform: translate(10px, 20px);

-webkit-transform: skew(30deg, -10deg);

-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);

/*Firefox browser*/

-moz-transform: rotate(-90deg);

-moz-transform: scale(2);

-moz-transform: scale(2, 1);

-moz-transform: translate(10px, 20px);

-moz-transform: skew(30deg, -10deg);

-moz-transform: matrix (1, -0.2, 0, 1, 0, 0);

/*Opera browser*/

-o-transform: rotate(-90deg);

-o-transform: scale(2);

-o-transform: scale(2, 1);

-o-transform: translate(10px, 20px);

-o-transform: skew(30deg, -10deg);

-o-transform: matrix (1, -0.2, 0, 1, 0, 0);

The rotation attribute code is very simple. The rotate attribute plus the rotation angle parameter, 45deg represents a 45-degree clockwise rotation. If it is rotated 45 degrees counterclockwise it is -45deg.

Similar to rotation, the scaling attribute is implemented by the scale keyword plus the scaling parameter. When there is only one parameter 2, it means that the X-axis and Y-axis directions of the HTML element are enlarged by 2 at the same time, and 0.5 means that it is reduced by half at the same time. If there are two parameters of 2 and 3 at the same time, it means that the X axis of the HTML element is enlarged by 2 and the Y axis direction is enlarged by 3.

As the name suggests, the coordinate translation attribute is to translate the HTML element by a number of pixels in the X and Y axis directions, which is implemented by the translate attribute. The latter two parameters represent the amount of translation to the X-axis and Y-axis respectively. The

skew property is also a useful transform function, which can tilt an object at a certain angle around the X and Y axes. This is different from the rotation of rotate. Rotate only rotates without changing the shape of the HTML element, while skew will change the shape of the HTML element. skew has two parameters, representing the tilt of the HTML element along the X and Y axes.

Matrix, you read that right, it is our usual matrix transformation. This transformation is the coordinate system transformation we learned in analytic geometry. It has six parameters (a, b, c, d, e, f) and is a 3 × 3 matrix representing the transformation matrix of coordinate transformation. Using it, we can flexibly complete any coordinate system transformation. Friends who are interested can check the college analytic geometry textbook, or W3c's definition and description of Matrix changes in SVG.

Currently, the browsers that support these 5 conversion attributes are Safari 4+, Chrome 5+, Firefox 3.5+, and Opera 10.5+. The entire IE browser series does not support this attribute.