Some new features of css3

Background: rgba (254,255,200, 0.75). As shown in the code above, the first three parameters are the primary colors R, G, and B, respectively, with a range of 0-255. The fourth parameter is the background transparency. The range is 0-1. For example, 0.5 indicates transparency 50%. This attribute allows us to achieve translucent glass effects like Win7 in the browser. Sample Code of css3 rounded corner/* FireFox syntax */-moz-border-radius: 6px 6px 6px;-moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px; /* Core WebKit browser syntax */-webkit-border-radius: 6px 6px 6px;-webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;-webkit-border-botto M-left-radius: 6px;/* CSS standard syntax */border-radius: 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 code above, the effects of the four corners can be specified by a line of code border-radius: 6px 6px 6px 6px. The four parameters are represented from left to right: upper left, upper right, lower right, and lower left. It can also be similar to border-top-right-radius: 6px; to specify the effect of each angle separately. Gradient background:-moz-linear-gradient (center top,/* coordinates of the starting gradient */rgba (254,216, 80, 0.75 ), /* gradient start color */rgba (230,125, 30, 0.75) 50%,/* intermediate gradient color */www.2cto. comrgba (254,235,121, 0.75)/* gradient end color */) repeat scroll 0 0 transparent; as shown in the code above, Mozilla uses the-moz-linear-gradient label to represent a linear gradient. The first parameter indicates the coordinates at the beginning of the gradient. It can be the coordinate value or the top, bottom, left, right, and center values. The following parameters are gradient color values, which are separated by commas. Each color value can be either a normal hexadecimal color or an RGBA color value. Each color can be followed by a percentage or a decimal point between 0 and 1, indicating the ratio of the color to the entire gradient. Webkit gradient syntax background:-webkit-gradient (linear,/* gradient linear */left top,/* coordinates starting from gradient */left bottom, /* coordinates of the gradient end */from (rgba (254,216, 80, 0.75),/* gradient start color */to (rgba (254,235,121, 0.75 )), /* gradient end color */color-stop (0.5, rgba (230,125, 30, 0.75)/* gradient intermediate color */) repeat scroll 0 0 transparent; the Webkit browser uses the-webkit-gradient attribute to indicate the gradient. The first parameter is the gradient type, usually the linear gradient of linear. The second parameter is the coordinate at the beginning of the gradient, which is the same as the first parameter of Mozilla. The third parameter is the coordinate of the gradient end. The fourth and fifth colors are the gradient start and end colors, which can be hexadecimal color values or RGBA color values. The last color-stop attribute can be separated by commas (,), indicating the gradient color in the middle of the home change. In the color-stop attribute, the first parameter is the ratio of the gradient, which can be a decimal or a percentage of 0-1; the second parameter is the gradient color value, which can also be the hexadecimal color value or the RGBA color value. Deformation deformation Transform is another blockbuster behind the linear color gradient of CSS. We usually use CSS and HTML to make HTML elements rotate or tilt at a certain angle. In order to make the element look more stereoscopic, we have to make this effect into an image, which limits many dynamic application scenarios. The introduction of the Transform attribute allows us to implement functions that previously can be achieved through Vector Plotting methods such as SVG, which only requires a simple CSS attribute. In CSS3, the Transform attributes mainly include rotate rotation, scale scaling, translate coordinate translation, skew coordinate skew, and matrix transformation. Next we will look at how each attribute is used. /* Core Webkit 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 */-moz-transform: rotate (-90deg);-moz-transform: scale (2);-moz-transform: scale (2, 1);-moz-transform: translate (10px, 20px);-moz-transfor M: 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. When the rotate attribute is added with the Rotation Angle Parameter, 45deg indicates 45 degrees of clockwise rotation. If it is a counter-clockwise rotation of 45 degrees, it is-45deg. Similar to rotation, the scaling attribute is implemented by the scale keyword and the scaling parameter. If there is only one parameter 2, the X axis and Y axis of the HTML element are zoomed in 2 at the same time, and the value 0.5 indicates that both the X axis and Y axis are halved. If two or three parameters exist at the same time, the X axis of the HTML element is enlarged 2 and the Y axis is enlarged 3. As the name implies, the coordinate translation attribute is used to translate several pixels from the HTML element to the X and Y axes, which is implemented by the translate attribute. The following two parameters indicate the amount of translation to the X and Y axes respectively. The skew attribute is also a useful transform function. It can tilt an object around the X and Y axes at a certain angle. This is different from the rotation of rotate. rotate only rotates the HTML element, but does not change the shape of the HTML element. skew changes the shape of the HTML element. Skew has two parameters, representing the number of slopes of the HTML element along the X and Y axes, respectively. Matrix, which is our normal Matrix transformation. This transformation is the coordinate system transformation we learned in analytic ry. It has six parameters (a, B, c, d, e, f), which are a 3 × 3 matrix representing the transformation matrix of coordinate transformation. With it, we can flexibly complete any coordinate system transformation. If you are interested, you can view the textbooks of college analytic ry, or the W3c defines and describes Matrix changes in SVG. Currently, browsers that support the conversion of these five attributes include Safari 4 +, Chrome 5 +, Firefox 3.5 +, and Opera10.5 +. The full range of IE browsers do not support this attribute.