CSS3 Box Shadow

grammar:

Shadow-Box: 1px 2px 3px #FFF;
Box-Shadow: shadow offset level (preferably positive or negative); shadow vertical offset value (preferably positive or negative); shadow blur value; shadow color;

compatibility

• Firefox Support Box Shadow (Shadow): - moz-box-shadow: 2px 2px 5px # 333333;
• webkit core of Safari and Chrome support Box Shadow (Shadow): - webkit-box-shadow: 2px 2px 5px # 333333;
• Opera supports Box Shadow (Shadow): box-shadow: 2px 2px 5px # 333333;
• IE does not support Box Shadow (hatched);

other

• You can use the same element multiple shadows, box-shadow: 2px 2px 5px # 333333, box-shadow: -2px -8px 5px # 333333 ;;
• js can be used: obj.style.webkitBoxShadow = Value (String); obj.style.MozBoxShadow = value (string); obj.style.boxShadow = value (string);

Show

<div style="
    width:150px;
    height:70px;
    -moz-box-shadow:0px 0px 5px #333333;
    -webkit-box-shadow:0px 0px 5px #333333;
    box-shadow:0px 0px 5px #333333;
"></div>

effect:

Reference article

• css3 property box-shadow shadow

Reproduced in: https: //www.cnblogs.com/rainman/archive/2011/07/12/2104362.html