Introduction to new styles in css3_html/css_WEB-ITnose

Due to IE in PC version development, we rarely use css3, but as tablets and smartphones enter our lives, and are becoming more and more popular now, in the mobile version and tablet version We can use it boldly during development. Let’s discuss several commonly used css3 attributes:
1. Introduction to the use of css3 prefixes. Let’s look at an example directly:

Java code

1. -webkit-transform:rotate(-3deg); // For webkit-based browsers such as Chrome and Safari
2. -moz-transform:rotate (-3deg); // For Firefox browser
3. -ms-transform:rotate(-3deg); // For IE browser
4. -o-transform:rotate(- 3deg);                                                                               When learning CSS3 properties, the first thing you will definitely think of is rounded corners, because in CSS2, you have to cut small pictures and splice them together, and you also need to control a lot of CSS code and consider compatibility. Corner, let’s look at a simple example:

Java code

border-radius:5px; //Set 4 corners and The length of the fillet radius is 5px;

border-top-left-radius:5px; //Set the first top left corner and the length of the fillet radius is 5px; for other uses, we can refer to the manual, it is very easy to use Simple

1. 3. Simple Shadows Let’s start by showing you how easy it is to add a shadow effect to any element on your web page. The following code snippet demonstrates a slightly rotated image with a shadow, both effects added using CSS.

Java code

In the above code, the transform CSS property implements image rotation, and the box-shadow property Add shadow effects to pictures. You can change the angle of rotation, or the parameters of the shadow, and just adjust those parameters.

Try it out and you will see the rotating image effect demonstrated below.
box-shadow can set 6 parameters: ①: The first length value is used to set the object’s shadow horizontal offset value. Can be a negative value ②: The second length value is used to set the vertical offset value of the object's shadow. Can be a negative value ③: If the third length value is provided, it is used to set the shadow blur value of the object. Negative values ​​are not allowed ④: If the fourth length value is provided, it is used to set the shadow extension value of the object. Negative values ​​are not allowed : Sets the color of the object's shadow. inset: Set the shadow type of the object to inner shadow. When the value is empty, the shadow type of the object is outer shadow

4. Element transformation We just mentioned the use of transform in the introduction to shadow. Let's take a look at an example. Move the mouse over the picture to enlarge it:

Java code

img { -webkit-transform: scale(0.5); }

img:hover { -webkit-transform: scale(1); }
4. Mouse over the image and it will pop up and become larger, as shown below.
5. Move the mouse away from the picture and the picture will return to its original state.

Let’s take a look at the meaning of each parameter of transform:

Java code

1. transform:translate(10px,10px) //The element moves 10 pixels horizontally and vertically
2. transform:rotate(10deg) //The element rotates 10 degrees
3. transform:scale(2) //The element is enlarged twice
4. transform:skew(10deg,10deg) //The element corresponds to the X-axis and Y-axis oblique distortion of 10 degrees

In the next section we will discuss the use of animation (transition) and gradient (gradient)