CSS仿Win7对话框黑色阴影效果

模板网 2014-09-04

CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。

兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。

效果图:

CSS仿Win7对话框黑色阴影效果

<title>CSS仿Win7对话框黑色阴影效果</title>
<style>
body {background:#EFEFEF;height:1000px;}
#box {
	width:441px;
	height: 249px; 
	right: 50%;
	bottom: 50%;
	margin-right: -235px;
	margin-bottom: -115px;
	position:fixed;
	_position: absolute;
	_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,300)||200)));
	box-shadow: 0 0 35px #000;
	-webkit-box-shadow: 0 0 35px #000;
	-moz-box-shadow: 0 0 35px #000;
}
</style>
<div id="box"></div>
<p>CSS仿Win7对话框黑色阴影效果</p>

相关文章

  1. JS+CSS简单实现DIV遮罩层显示隐藏

    Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最

  2. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：

  3. 手机站常用的底部导航条，宽度自适应

    手机站常用的底部导航条，宽度自适应。 代码打包下载： 手机站常用的底部导航条，宽度自适应 效果截图：

  4. 纯CSS实现的二级菜单

    纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。 主要利用了CSS伪类hover来实现的，代码简单容易理解。 相比较采用JS或者jQuery库实现的二级菜单，代码量极少。 效果截图：

  5. 手机站底部很好看的导航条效果

    手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：

随机推荐

  1. JS+CSS简单实现DIV遮罩层显示隐藏

    Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最

  2. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：

  3. 手机站常用的底部导航条，宽度自适应

    手机站常用的底部导航条，宽度自适应。 代码打包下载： 手机站常用的底部导航条，宽度自适应 效果截图：

  4. 纯CSS实现的二级菜单

    纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。 主要利用了CSS伪类hover来实现的，代码简单容易理解。 相比较采用JS或者jQuery库实现的二级菜单，代码量极少。 效果截图：

  5. 手机站底部很好看的导航条效果

    手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：