css3（1）_html/css_WEB-ITnose

Everyone often plays Tencent games on their mobile phones. They may not have thought about how these games are implemented. Just enjoy the process and feeling of the game. In fact, some games are implemented by CSS3 js H5. Below Let me introduce CSS3 first, and everyone is welcome to complain. The following basic knowledge is a concept that everyone can understand at a glance. If you want to learn these well, please read it patiently. Everyone is welcome to correct me.

Basic knowledge one: the current mainstream browsers chrome, safari, firefox, opera, and even 360 have been Most functions of CSS3 are supported. IE10 will also fully support CSS3 from now on. In the process of your learning, you sometimes see some codes with prefixes in front of them. This is to be compatible with different browsers. The following is an illustration:

Basic knowledge two: what can CSS3 do?

CSS3 is used in animation, rounded corners, selectors, shadows, colors, gradient effects, personalized fonts, multiple background images, border background images, deformation processing, multi-column layout, media queries and other fields Plays an important role, greatly simplifying the design process of front-end developers and speeding up page loading.

Basic knowledge three: border-radius is used to add rounded borders to elements. How to use border-radius: 10px means: all corners are rounded with a radius of 10px; border-radius: 4px 3px 2px 1px, clockwise, the four radius values ​​are the upper left corner, the upper right corner, the lower right corner, and the lower left corner. Draw inferences here, based on this attribute, how do you want to realize a solid circle, a solid upper semicircle, a solid lower semicircle, a solid left semicircle, and a solid right semicircle?

Basic knowledge four: box-shadow is to add a shadow to the box. It supports one or more shadows. As long as you can think of it, there is no shadow that you can't achieve.

His syntax is: box-shadow: X-axis offset, Y-axis offset, shadow blur radius, shadow expansion radius, shadow color, projection method.

The parameter settings are shown in Figure:

X -axis offset is positive, which means that the shadow is on the right side of the object, vice versa on the left;

y If the axis offset is positive, it means that the shadow is on the bottom of the object, otherwise it is on the top; When its value is 0, it means that the object does not have a blur effect. The larger the value, the larger the blur edge of the shadow.

The shadow expansion radius, the value can be positive and negative, the larger the positive value indicates that the larger the shadow radius extends, the more the negative value shows that the shadow radius extends smaller.