The box-shadow property of CSS3 allows us to easily achieve layer shadow effects. Let’s explain this attribute in detail in practice.
1. Browser compatibility of the box-shadow attribute Let’s first look at the browser compatibility of this attribute:
Opera: I don’t know which version it started to support. When I posted this article for testing, I just updated Opera to the latest version 10.53, which already supports the box-shadow attribute.
Firefox supports this via the private property -moz-box-shadow.
Safari and Chrome support this via the private property -webkit-box-shadow.
Not supported by all IEs (I don’t know if IE9 has improved). Don’t worry, we will introduce some Hacks for IE at the end of the article.
2. Syntax of box-shadow attribute
box-shadow has six settable values:
img{box-shadow: Shadow type X-axis displacement Y-axis displacement shadow size shadow extension shadow color}
When no shadow type is set, the default is shadow effect. When set to inset, it is an inner shadow effect.
X-axis and Y-axis displacement are not equivalent but similar to "angle" and "position" in photoshop.
Shadow size, extension, color are the same as in Photoshop.
3. Example analysis Let us look at the effect of a box-shadow through several examples. First, make a simple HTML for testing:
<html>
<head>
<style type="text/css">Write the CSS part here</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
Please note: To save trouble, only box-shadow is written in the CSS code below. In actual use, you should also write -moz-box-shadow and -webkit-shadow. What you need to do is very simple, copy two box-shadows and add -moz- and -webkit- in front of them.
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
(1). Drop shadow, no displacement, 10px shadow size, no expansion, color #06C
img{box-shadow:0 0 10px #06C;}
The color value here is the HEX value. We can also use the RGBA value. The advantage of the RGBA value is that it has an additional Alpha transparency value, and you can control the transparency of the shadow.
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2). Add a 20px extension to the above
img{box-shadow:0 0 10px 20px #06C;}
(3). Inner shadow, no displacement, 10px size, no expansion, color #06C
img{box-shadow:inset 0 0 10px #06C;}
(4). Multiple shadow effects
Box-shadow can be used multiple times at the same time. Let's use a four-color shadow.
img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
(5). The order of using multiple shadow attributes. When using multiple shadow attributes for the same element, you need to pay attention to their order. The shadow written first will be displayed at the top. For example, in the following code, we first write a 10px green shadow, and then write a 10px size but extended by 20px shadow. The result is: a green shaded layer on top of a yellow shaded layer.
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}
But if we change the order, like this:
img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}
We won't be able to see the green shaded layer written later because it is covered by the yellow layer written first and with a larger radius.
4. Let IE also support box-shadow
IE itself uses a shadow filter to achieve similar effects, and there are also some js and .htc hack files that can help you achieve this effect in IE. I can't try them all, so here I only introduce the one I have used.
ie-css3.htc is an htc file that allows the IE browser to support some CSS3 properties, not just box-shadow, but also allows your IE browser to support the rounded corner attribute border-radius and text-shadow attribute text-shadow .
How to use it: download it and put it in your server directory
Write the following code in your <head></head>:
<!--[if IE]>
<style type="text/css">
img, #testdiv, .testbox{behavior: url( http://yourdomain.com/js/ie-css3.htc );}
</style>
<![endif]-->
In the blue part, enter the selector using the box-shadow attribute, and in the green part, enter the absolute path or relative path of ie-css3.htc. Anyway, make sure it is accessible.
Then it's OK. But there are still a few things to note:
When you use this htc file, as long as box-shadow, -moz-box-shadow or -webkit-box-shadow is written in your CSS, IE will render it.
When using this htc file, you cannot write box-shadow: 0 0 10px red; but box-shadow: 0px 0px 10px red; otherwise it will fail in IE.
Alpha transparency in RGBA values is not supported.
Inset inner shadows are not supported.
Shadow expansion is not supported.
Shadows will only appear black in IE, no matter what other colors you set to them.
So, this script only allows IE to support some box-shadow values. If you have other better IE hacks scripts, please leave a message to share.