CSS3 properties box-shadow usage tutorial, css3box-shadow
The box-shadow attribute of CSS3 allows us to easily implement layer shadow effects. Let's take a closer look at this property.
1. browser compatibility of the box-shadow attribute
First, let's take a look at the browser compatibility of this attribute:
Opera: I don't know from which version it is supported. When I published this article and tested it, I updated Opera to the latest version 10.53. The box-shadow attribute is already supported.
Firefox supports private attributes-moz-box-shadow.
Safari and Chrome are supported by private properties-webkit-box-shadow.
All IE does not support (I wonder if IE9 has improved ). Don't worry, we will introduce some Hack for IE at the end of the article.
2. syntax of the box-shadow attribute
Box-shadow has six configurable values:
Img {box-shadow: shadow Type X axis displacement Y axis displacement shadow size shadow extended shadow color}
If the shadow type is not set, the projection effect is used by default. When it is set to inset, It is the inner shadow effect.
The X axis and Y axis displacement are not the same but similar to the "angle" and "position in photoshop.
The shadow size, expansion, color, and Photoshop are all the same.
3. instance resolution
Let's take a look at the effects of a box-shadow through several examples. First, we can get a simple html for testing:
<Html>
<Head>
<Style type = "text/css"> the CSS part is written here </style>
</Head>
<Body>
</Body>
</Html>
Note: To save the trouble, only box-shadow is written in the following CSS code. In actual use, you should also write-moz-box-shadow and-webkit-shadow. Copy two boxes-shadow and add-moz-and-webkit-before them -.
Img {
-Moz-box-shadow: 2px 2px 10px # 06C;
-Webkit-box-shadow: 2px 2px 10px # 06C;
Box-shadow: 2px 2px 10px # 06C;
}
(1). projection, no displacement, 10 PX shadow size, no expansion, color # 06C
Img {box-shadow: 0 0 10px # 06C ;}
Here, the color value is the HEX value. We can also use the RGBA value. The advantage of the RGBA value is that it has an Alpha transparency value while you can control the transparency of the shadow.
Img {box-shadow: 0 0 10px rgba (0,255, 0,. 5 )}
(2). Add 20 PX extension to the above
Img {box-shadow: 0 0 10px 20px # 06C ;}
(3). Inner Shadow, no displacement, 10 PX size, no extension, color # 06C
Img {box-shadow: inset 0 0 10px # 06C ;}
(4). Multi-shadow effect
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). Sequence of multiple shadow attributes
When multiple shadow attributes are used for the same element, pay attention to the sequence of these attributes. The shadow written first is displayed at the top layer. For example, in the following code, we first write a green shadow of 10 PX, and then a shadow of 10 PX size but extended by 20 PX. The result is that the green shadow layer is above the yellow shadow layer.
Img {box-shadow: 0 0 10px green; box-shadow: 0 0 10px 20px yellow}
However, if we adjust the order like this:
Img {box-shadow: 0 0 10px 20px yellow, box-shadow: 0 0 10px green ;}
We will not see the green shadow layer after writing, because it overwrites the yellow layer with a large radius.
4. Let IE also support box-shadow
IE itself is a shadow filter that can achieve similar effects. There are also some js and. htc hack files that can help you achieve this effect in IE. I cannot try it all at once. Here I will only describe one of them I have used.
Ie-css3.htc is an htc file that allows IE to support some CSS3 properties, not just box-shadow, it also allows your IE browser to support the border-radius and text-shadow attributes.
Its usage is: download it and put it to your server directory
Write the following code in your
<! -- [If IE]>
<Style type = "text/css">
Img, # testdiv,. testbox {behavior: url (http://yourdomain.com/js/ie-css3.htc );}
</Style>
<! [Endif] -->
The blue part inputs use the selector of the box-shadow attribute, the green part inputs the absolute path of the ie-css3.htc, or the relative path, to ensure access to it anyway.
Then OK. Note the following points:
After you use this htc file, you only need to write box-shadow,-moz-box-shadow, or-webkit-box-shadow in your CSS file, IE will render.
When this htc file is used, you cannot write box-shadow: 0 0 10px red in this way; instead, it should be box-shadow: 0px 0px 10px red; otherwise, it will become invalid in IE.
Alpha transparency in RGBA values is not supported.
Inset shadow is not supported.
Shadow extension is not supported.
In IE, the shadow is only black, no matter what color you set.
Therefore, this script only allows IE to support some box-shadow values. If you have other better IE hacks scripts, please share them with us.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
