CSS3 box-shadow内阴影

CSS3 box-shadow内阴影HTML5中文学习网,是中国最大的HTML5中文门户,为广大HTML5爱好者提供各种HTML5资料,包括HTML5网站、HTML5资讯、HTML5应用、HTML5游戏、HTML5教程、HTML5视频、HTML5论坛等。

CSS3 box-shadow:

浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and Later

内阴影效果(偏移值都为正):

#box-shadow{ 	-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */ 	-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */ 	box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */ }

内阴影效果(偏移值都为负):

#box-shadow2{ 	-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */ 	-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */ 	box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */ }

内阴影效果(水平偏移为负,垂直偏移为负):

#box-shadow3{ 	-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */ 	-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */ 	box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */ }

内阴影效果(水平偏移为正,垂直偏移为负):

#box-shadow4{ 	-moz-box-shadow:5px -5px 5px #999 inset;              /* For Firefox3.6+ */ 	-webkit-box-shadow:5px -5px 5px #999 inset;           /* For Chrome5+, Safari5+ */ 	box-shadow:5px -5px 5px #999 inset;                   /* For Latest Opera */ }

* 还可以试试把某个偏移值设置为0,这时阴影的效果就只是单边的

【网站声明】本站除付费源码经过测试外,其他素材未做测试,不保证完整性,网站上部分源码仅限学习交流,请勿用于商业用途。如损害你的权益请联系客服QQ:2655101040 给予处理,谢谢支持。

相关文档推荐

近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对这一问题,浩子
纯javascript+CSS3制作精美时钟。该实例主要应用了CSS3中transform属性(translate、rotate)、border-radius属性。 CSS样式: style type=text/css body { background: black; } .fill { position: absolute; top: 0; right: 0
CSS3动画实例--jQuery+CSS3制作转动的3D立方体动画实例,该实例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要应用了CSS3中transform属性。 CSS代码: body { background-image:radial-gradient(circle, #
一、CSS3 animation 简介 在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是Keyframes,我们把他叫做关键帧,玩过flash的朋友可能对这个东西并不会陌生。CSS3的Animation就是由
CSS3渐变背景动画应用,严格来说,目前各个浏览器都还不支持css3的渐变背景的动画,所以在制作的时候我们要灵活变通下,这里有两种方法可以曲折实现渐变背景的动画: 方法一:
随着技术的发展,代码在不断的进步,进而替代一些图片所能实现的效果,其中CSS3属性中Box-shadow表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷