Home > Developer > Web Develop
CSS3The Box-shadow property allows us to easily implement a layer shadow effect. Let's do the actual combat to explain this property.
1. Browser Compatibility for Box-shadow properties
Let's take a look at the browser compatibility for this property:
Opera: I do not know which version to support, I am in this article test, just update opera to the latest version 10.53, has supported the Box-shadow property.
Firefox is supported via private attribute-moz-box-shadow.
Safari and Chrome are supported via private property-webkit-box-shadow.
All IE does not support (do not know whether IE9 has improved). Don't worry, we will introduce some hack for IE at the end of the article.
2. Syntax for the Box-shadow property
The Box-shadow has six values to set:
Img{box-shadow: Shadow type X axis displacement y-axis displacement shadow size shadow expand shadow Color}
When no shadow type is set, the default is the projection effect. When set to inset, is the inner shadow effect.
The x-axis and y-axis displacements are not equal but similar to the "angle" and "position" inside Photoshop.
Shadow size, extension, color, and Photoshop are all in the same vein.
3. Example parsing
Let's take a few examples to see a box-shadow effect, first get a simple HTML to test:
<style type= "Text/css" >css part written here </style>
<body>
</body>
Please note: In order to save the matter, the followingCSS CodeIn the actual use of Box-shadow, you should put-moz-box-shadow and-webkit-shadow also write on. You need to do a very simple, copy two Box-shadow, and add-moz-and-webkit-in front of each one.
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, 10px shadow size, no extension, 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 alpha transparent value, 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 base
img{box-shadow:0 0 10px 20px #06C;}
(3). Inner Shadow, no displacement, 10px size, no extension, color #06c
Img{box-shadow:inset 0 0 10px #06C;}
(4). Multiple Shadow Effects
Box-shadow can be used multiple times, we have 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). Order problem with multiple shadow properties
When you use multiple shadow properties for the same element, you need to be aware of its order, and the first-written shadow will be displayed at the top level. For example, the following code, we first write a 10px green shadow, and then write a 10px size but extend the shadow of 20px. The result: The green Shadow layer is above the yellow shaded layer.
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px Yellow}
But if we turn 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 the write because it is written first and the radius of the larger yellow layer is covered.
4. Let IE also supportBox-shadow
IE itself is shadow filter can achieve similar effects, there are some JS and. HTC's hack file can help you achieve this in IE. I can't try it all, but I'm just going to show you the one I used.
IE-CSS3.HTC is an HTC file that allows IE browser to support some CSS3 properties, not just box-shadow, it also allows your IE browser to support fillet properties Border-radius andText ShadowThe Text-shadow property.
It is used by downloading it and putting it in 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 of the input to use the Box-shadow attribute of the selector, the green part of the input IE-CSS3.HTC absolute path, or relative path, anyway, to ensure that access can be obtained.
And then it's OK. However, there are a few points to note:
When you use this HTC file, in your CSS, as long as you write any kind of Box-shadow,-moz-box-shadow or-webkit-box-shadow, IE will render.
When using this HTC file, you cannot write box-shadow:0 0 10px red; And should be box-shadow:0px 0px 10px red; Otherwise, IE will fail.
Alpha Transparency in RGBA values is not supported.
Inset inner shadow is not supported.
Shadow extensions are not supported.
Shadows are only shown in black in IE, no matter what color you set.
So, this script just lets IE support part of the Box-shadow value. If you have other better ie hacks scripts, please share the message.
CSS3 Properties Box-shadow using tutorials, Css3box-shadow
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
