Rumah > Artikel > hujung hadapan web > HTML CSS边框阴影的实现_html/css_WEB-ITnose
HTML CSS边框阴影的实现_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:33:412892semak imbas
一款用CSS控制背景图像平铺，从而实现区域边框阴影的效果，虽然用到了图片，但可贵之处是本代码不管你需要阴影的区域是多大，它都能自动适应，因些还是很值得收藏一下的，兼容所有的IE浏览器。
<!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> 效果图
需要两张图片
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：设计师必备的30款好看的手写字体免费下载_html/css_WEB-ITnoseArtikel seterusnya：前端高效开发之“一键切图”_html/css_WEB-ITnose