Detailed CSS3 background-related style instance code

This article details CSS3 background-related style instance code

Background-image to draw multiple picture overlays, examples are as follows:

<! DOCTYPE html>

Background-clip: The drawing area of the specified background:
Background-origin: Position the background image relative to the content box:

<! DOCTYPE html>
CSS3 Properties of Box-shadow:

Let IE6, 7, 8 all support Border-radius, Box-shadow, Text-shadow method: With IE-CSS3.HTC

First download the IE-CSS3.HTC script and then add it to the CSS:

It is used by downloading it and putting it in your server directory

Write the following code in your 
. box{-moz-box-shadow:10px 10px 20px #000;/* Firefox */-webkit-box-shadow:10px 10px 20px #000;/* Safari and Chrome */ box-shadow:10px 10px 20px #000; /* Opera 10.5+, future browsers and ie6+ using IE-CSS3 */Behavior:url (IE-CSS3.HTC); }
Note: The IE-CSS3.HTC address in Behavior:url (IE-CSS3.HTC) is either under the absolute path or directly under the root of the Web site, otherwise you may not see the effect.

• When you use this HTC file, your CSS will be rendered if you write any of the Box-shadow,-moz-box-shadow or-webkit-box-shadow.
• After 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 shadows are not supported.
• Shadow extensions are not supported.
• Shadows are only shown as black in IE, no matter what color you set.
However, this script simply allows IE to support a partial Box-shadow value.