Home > Developer > Web Develop
CSS border shadow and css border shadow
CSS border shadow effect
The following uses css to implement the shadow effect, so that you can directly add the code to your friends.
# Shadow1 {
Width: 200px;
Height: 100px;
Color: white;
Background-color: red;
Box-shadow: 5px-5px 1px 1px #000;
-Webkit-box-shadow: 5px-5px 1px 1px #000;
-Moz-box-shadow: 5px 5px 1px 1px #000;
/* For IE 8 */
-Ms-filter: progid: DXImageTransform. Microsoft. Shadow (Strength = 5, Direction = 120, Color = '#1000 ');
/* For IE 5.5-7 */
Filter: progid: DXImageTransform. Microsoft. Shadow (Strength = 5, Direction = 125, Color = '#1000 ');
}
# Shadow2 {
Width: 420px;
Height: pixel PX;
Background: url(1.jpg) no-repeat;
Margin-top: 20px;
Box-shadow: 10px 8px 10px 3px #000;/* Chrome 6 +, Firefox 4 +, IE 9 +, iOS 5 +, Opera 10.50 + */
-Webkit-box-shadow: 10px 8px 10px 3px #000;
-Moz-box-shadow: 10px 8px 10px 3px #000;
/* Background-clip: padding-box ;*/
Opacity: 0.9;/* Transparency */
}
The Shadow example is here. The article is simple. If you have any shortcomings, please correct them. Thank you...
Css3 implementation
. Shadow {box-shadow: 0 0 3px #000 ;}
How to Use DIV + CSS to implement word border shadow
Use two layers
<! Doctype html public "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml"> <Meta http-equiv = "Content-Type" content = "text/html; charset = GB2312">
<Title> </title>
</Head>
<Body>
<Div style = "height: 22px; width: 302px; border-right: 1px # ccc solid; border-bottom: 1px # ccc solid;">
<Div style = "height: 20px; width: 300px; border: 1px #333 solid;"> </div>
</Div>
</Body>
</Html>
As a result, the border is 1 px, but if the border is widened, the shadow is parallel to the inside border, and the effect is too false ..
It is very difficult to use css, or the compatibility is too bad, and the code is too long...
It is better to directly create an image as the shadow part and put it in the layer as the background, and the size of the image will be small.
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
