CSS border shadow and css border shadow

Source: Internet
Author: User

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...


How does CSS make the four borders of a div shadow?

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.