Heim > Artikel > Web-Frontend > css实现边框阴影效果_html/css_WEB-ITnose
css实现边框阴影效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:362220Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css3实现的将页面倾斜一定的角度_html/css_WEB-ITnoseNächster Artikel：(原)前端知识杂烩_html/css_WEB-ITnose