Summary of 6 ways to use CSS3 shadows

Today we will mainly discuss how to use CSS3 shadows. Below, the editor will bring you an article to help you master CSS3 shadow tips (recommended by the editor). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

1. CSS3 Text Shadow—Text-Shadow

Some time ago, we sorted out three new features: Gradient, Transparency RGBA, and Box-radius in CSS3 Regarding the usage of attributes, I have continued to sort out the usage of text-shadow in CSS3 these few times. I took some time to post this today to share this new application with friends who share the same hobby.

2. Summarize the usage methods and techniques of css3 shadow effect

css3 can achieve many effects, today I will Summarize the methods and techniques of using css3 to achieve shadow effects:

If there are multiple shadows, separate them with commas, and stack them downwards in order, with the first one written at the top

If there is an inset, It is an inner shadow, but please note: if you simply add inset to the original shadow, the shadow will be inside the opposite side, not simply flipped in the opposite direction.

3. Detailed explanation of rounded corners and shadows, border images and box subtraction in CSS3

A value setting is The horizontal and vertical radii of the four corners of the box can be set individually for each corner. The order of values ​​is upper left, upper right, upper right, lower right, lower left. Clockwise setting can be abbreviated. The logic is the same as padding and margin. The units support pixels and percentages (refer to Width and height)

You can use horizontal radius/vertical radius to control the radius individually, and each radius can be controlled independently

4. CSS3 rounded corners, shadow, transparency_html /css_WEB-ITnose

There are many ways to achieve rounded corners, shadows, and transparency in CSS. The traditional methods are more complicated. It is much more convenient to use CSS3, although the support for CSS3 is not yet supported by various browsers. Very good, but CSS3 will be popular in the near future.

5. Summary of the use and techniques of CSS3 shadow box-shadow

text-shadow adds a shadow effect to the text, and box-shadow adds a surrounding shadow effect to the element block. With the popularity of HTML5 and CSS3, the use of this special effect is becoming more and more common.

The basic syntax is {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

Object selector {box-shadow:[projection method] X axis Offset Y-axis offset shadow blur radius shadow extended radius shadow color}

6. Introduction to the use of CSS3 shadows

Standard syntax:

box-shadow: h-offset v-offset blur spread color [inset],...

[The offset is positive to the lower right , the upper left is a negative value]

a. If there are multiple shadows, separate them with commas and stack them downwards in order. The first one is written on the top

b. If there is an inset, it is Inside shadow, but be careful: if you simply add inset to the original shadow, the shadow will be inside the opposite side, not simply flipped in the opposite direction.

Related questions and answers

php - ios css3 shadow cannot be used

[Related recommendations]

1. Summary of methods to achieve various effects with css borders

2. Easily master css3 shadow, reflection, gradient tips

The above is the detailed content of Summary of 6 ways to use CSS3 shadows. For more information, please follow other related articles on the PHP Chinese website!