When you use box-shadow to implement the shadow effect, have you noticed that in some cases, the shadow is not transparent? veryhuo.com
Copy to ClipboardReference: [www.bkjia.com] <! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> fire school </title>
<Style>
. Shadow {
Width: 120px;
Height: 120px;
Border: 1px solid # ccc;
Background: # fff;
Font-size: 12px;
Padding: 10px;
-Moz-box-shadow: 0 4px 4px #999;
-Webkit-box-shadow: 0 4px 4px #999;
Box-shadow: 0 4px 4px #999;
* Filter: progid: DXImageTransform. Microsoft. Shadow (Strength = 4, Direction = 135, Color = "#333333 ");
Helping customers
}
</Style>
</Head>
<Body>
<Div style = "width: 200px; height: 200px; background: #393"> </div>
<Div class = "shadow" style = "position: absolute; left: 80px; top: 50px">
Www.bkjia.com
Shadow Effect
</Div>
</Body>
</Html>
Solution: The color in box-shadow uses the rgba method, for example, rgba (0, 0, 0, 0.4), where 0.4 is used to set transparency. For example:
Veryhuo.com
Copy to ClipboardReference: [www.bkjia.com] <! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> fire school </title>
<Style>
. Shadow {
Width: 120px;
Height: 120px;
Border: 1px solid # ccc;
Background: # fff;
Font-size: 12px;
Padding: 10px;
-Moz-box-shadow: 0 4px 4px rgba (0, 0, 0, 0.4 );
-Webkit-box-shadow: 0 4px 4px rgba (0, 0, 0, 0.4 );
Box-shadow: 0 4px 4px rgba (0, 0, 0, 0.4 );
* Filter: progid: DXImageTransform. Microsoft. Shadow (Strength = 4, Direction = 135, Color = "#333333"); Fire Network
}
</Style>
</Head>
<Body>
<Div style = "width: 200px; height: 200px; background: #393"> </div>
<Div class = "shadow" style = "position: absolute; left: 80px; top: 50px">
Www.bkjia.com
Shadow Effect
</Div>
</Body>
</Html>