How to use the newly added style in css3-jerrylsxu

New Style usage in css3-jerrylsxu is rarely used in PC development due to IE, but as tablets and smartphones enter our lives and become increasingly popular, we can use the mobile and tablet editions boldly. Below we will discuss several commonly used css3 attributes:

1.css 3 prefix usage introduction. Let's look at an example:

1. -Webkit-transform: rotate (-3deg); // used by browsers with webkit kernels such as Chrome and Safari
2. -Moz-transform: rotate (-3deg); // used by Firefox
3. -Ms-transform: rotate (-3deg); // used by IE
4. -O-transform: rotate (-3deg); // used by operabrowser
5. Transform: rotate (-3deg); // It is used by the css3 browser.

2. when learning the css3 attribute, the first one will surely think of rounded corners, because css 2 needs to splice a small image, it also requires a lot of css code control, but it is difficult to consider compatibility. But after css3, you only need this attribute "border-radius" to achieve rounded corners. Let's look at a simple example:

1. Border-radius: 5px; // set four corners and the radius of the rounded corner is 5 PX;
2. Border-top-left-radius: 5px; // you can specify the first corner on the left and the radius of the rounded corner is 5 PX. For more information, see the manual.

3. Simple shadow
Let's start by showing you how simple it is to add a shadow to any element on the webpage. The following code snippet demonstrates an image with slight rotation and shadow. Both effects are added using CSS.

1. "Megan.jpg" style = "-webkit-transform: rotate (5deg);-webkit-box-shadow: 10px 10px 5px #888;"/>

In the above Code, the transform CSS attribute achieves image rotation, and the box-shadow attribute adds a shadow effect to the image. You can change the rotation angle or the shadow parameter. It is okay to adjust those parameters only.

Try it and you will see the rotating image shown below.



Box-shadow can be set with six parameters:
①: 1st length values are used to set the object's shadow horizontal offset value. It can be a negative value.
②: The 2nd length value is used to set the vertical offset of the shadow of the object. It can be a negative value.
③: If 3rd length values are provided, it is used to set the shadow blur value of the object. Negative value not allowed
④: If 4th length values are provided, it is used to set the shadow extension value of the object. Negative value not allowed
: Sets the shadow color of an object.
Inset: Set the object shadow type to inner shadow. If this value is null, the object's shadow type is external shadow.

4. Element Transformation
We mentioned the use of transform in the shadow introduction just now. Let's take a look at an example. Move the mouse over the image to zoom in:

1. "Megan.jpg"/>

Move the mouse over the image and it will pop up and become larger, as shown below.

Move the mouse over the image, and the image will be restored to its original state.

Let's take a look at the meanings of transform parameters:

1. Transform: translate (10px, 10px) // This element moves 10 pixels horizontally and vertically.
2. Transform: rotate (10deg) // This element rotates for 10 degrees
3. Transform: scale (2) // This element doubles
4. Transform: skew (10deg, 10deg) // This element corresponds to a 10 degree oblique twist on the X and Y axes.