Home > Article > Web Front-end > css实现边框阴影效果_html/css_WEB-ITnose
css实现边框阴影效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:362219browse
css实现边框阴影效果:
有时候阴影边框在一些效果中能够有效的提高美观度，下面就介绍一下如何利用css实现此效果。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.thediv{ width:250px; height:100px; border:#909090 1px solid; background:#fff; color:#333; filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090, direction=120, strength=3);/*ie*/ -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/ box-shadow:2px 2px 10px #909090;/*opera或ie9*/}</style></head><body><div class="thediv"></div></body></html>
以上代码可以再IE9和IE9以上代码能够实现边框阴影效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12678
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3实现的将页面倾斜一定的角度_html/css_WEB-ITnoseNext article：(原)前端知识杂烩_html/css_WEB-ITnose