css实现边框阴影效果_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:30:36

Original

2250 people have browsed it

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>

Copy after login

以上代码可以再IE9和IE9以上代码能够实现边框阴影效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12678

更多内容可以参阅:http://www.softwhy.com/divcss/

Related labels：

css实现边框阴影效果

source：php.cn

Previous article：css3实现的将页面倾斜一定的角度_html/css_WEB-ITnose Next article：(原)前端知识杂烩_html/css_WEB-ITnose

Statement of this Website

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