A tool that uses CSS to control background image tiling to achieve the effect of regional border shadows. Although pictures are used, the valuable thing is that this code does not matter how big the area you need to shadow is. It can automatically adapt, so it is worth collecting, and it is compatible with all IE browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS边框阴影</title><style>.dropshadow2{ float:left; clear:left; background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important; background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right; margin: 10px 0 10px 10px !important; margin: 10px 0 10px 5px; width: 360px; padding: 0px;}.innerbox{ position:relative; bottom:6px; right: 6px; border: 1px solid #999999; padding:4px; margin: 0px 0px 0px 0px;}.innerbox{ /* IE5 hack */ margin: 0px 0px -3px 0px; margin: 0px 0px 0px 0px;}.innerbox p{ font-size:14px; margin: 3px;}</style></head><body><div class="dropshadow2"><div class="innerbox"><h4>CSS阴影:</h4> <p>这段边框阴影效果怎么样呢?</p></div></div></body></html>
Rendering
Two pictures required