The box-shadow attribute of css3 allows us to easily implement layer shadow effects. Let's take a closer look at this property.
First, let's take a look at the browser compatibility of this attribute:
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.
Ii. 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}
Iii. 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> <Style type = "text/CSS"> the CSS part is written here </style>
</Head>
<Body>
</Body>
</Html>
Note: The following CSSCodeOnly box-shadow is written. 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 expansion, color # 06c
IMG {box-Shadow: Inset 0 0 10px # 06c ;}
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
