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. 手机站底部很好看的导航条效果

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

  2. DIV的CSS height:100%无效的解决办法

    在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

  3. 常用CSS重置代码

    CSS重置(CSS reset),也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,

  4. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:

  5. 纯CSS实现的二级菜单

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

随机推荐

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

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

  2. DIV的CSS height:100%无效的解决办法

    在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

  3. 常用CSS重置代码

    CSS重置(CSS reset),也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,

  4. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:

  5. 纯CSS实现的二级菜单

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