How to use newly added styles in css3, and add styles in css3

How to use newly added styles in css3, and add styles in css3

CSS 3 is rarely used in PC development due to Internet Explorer, but as tablets and smartphones enter our lives and are becoming 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:

Java code

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:

Java code

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.

Java code

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:
<Length> ①: 1st length values are used to set the shadow horizontal offset value of the object. It can be a negative value.
<Length> ②: 2nd length values are used to set the vertical offset value of the shadow. It can be a negative value.
<Length> ③: If 3rd length values are provided, it is used to set the shadow blur value of the object. Negative value not allowed
<Length> ④: If 4th length values are provided, it is used to set the shadow extension value of the object. Negative value not allowed
<Color>: Set the color of the Object Shadow.
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:

Java code

2. <Style>
3. Img {-webkit-transform: scale (0.5 );}
4. Img: hover {-webkit-transform: scale (1 );}
5. </Style>

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:

Java code

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.

Next we will discuss the use of animation (transition) and gradient (gradient ).