css: How to set the transparency of box-shadow?

Today I discovered that using the box-shadow attribute can add a shadow effect to p very well, but if the added effect is:

-moz-box-shadow:0 4px 4px #999; 
-webkit-box-shadow:0 4px 4px #999; 
box-shadow:0 4px 4px #999;

The color set using # has no transparent effect. Set the color of the shadow in this way. If the location where the shadow falls is not white, or even dynamic, for example, if it falls on a slide, several pictures of different colors will rotate. Then setting the shadow color like this will make the shadow effect look fake!

Solution: Use rgba instead.

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

Let me explain here:

ie6 and ie7 should not support the box-shadow attribute.

You can use: *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); instead

Because the shadow I set is not It is not required to display in all browsers. So I didn't add this line of code, so I didn't verify whether it is feasible to replace the color in Color="#888888" with rgba here. Friends who need it can verify it by themselves. I guess it will be annoying!

My principles:

As long as there are no problems such as layout misalignment, I will not make compatibility modifications.

For the small number of die-hards who do not upgrade their browsers, there is no need to add a line of redundant code. Since you are using an old version of the browser, it is certain that the effect you see is not beautiful enough.

The reason why many old versions of IE browsers still exist today is because they are used to the front end!

The above is the detailed content of css: How to set the transparency of box-shadow?. For more information, please follow other related articles on the PHP Chinese website!