首页  >   工具使用  >  css阴影 如何用CSS实现DIV块的阴影效果

css阴影 如何用CSS实现DIV块的阴影效果

利用边框阴影(box-shadow),可以制作出光晕、浮雕等原来只有依赖P图才能完成的效果。ie6~ie8都不支持边框阴影(box-shadow),ie9+Firefox4,Chrome,Opera及Safari5.1.1支持边框阴影属性(box-shadow),在边框阴影(box-shadow)的基本语法中,参数inset是可选可不选的,选参数inset,将外部阴影改为内部阴影;而不选参数inset,即默认情况下是外部阴影的。

css阴影——如何用CSS实现DIV块的阴影效果

可以用CSS3的阴影属性。不过要支持IE6的话,加载个.htc行为文件就好了。border:1pxsolid#696;padding:60px0;text-align:center;width:200px;-webkit-box-shadow:#6660px0px10px;-moz-box-shadow:#6660px0px10px;box-shadow:#6660px0px10px;background:#EEFF99;behavior:url(/PIE.htc)。

直接使用box-shadow:5px5px10pxblackinset;属性设置样式样式就可以了。前两个值(5px5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;第三个值(10px)是设置模糊距离;black就是阴影的颜色啦;最后一个inset是在元素内部创建一个阴影,也就是内阴影了;删除掉inset就是设置外阴影了。

这是使用纯CSS实现的效果,在DIV层的区域边框添加阴影效果,看上去非常形象,但是实现起来并不是太难,CSS代码比较简洁,值得我们学习。<title>盒子阴影的CSS实现方法</title>

box-shadow单边阴影写法

语法:box-shadow:h-shadowv-shadowblurspreadcolorinset;

(box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色内部阴影;)

水平阴影、垂直阴影值必填,其余值可选;

<!DOCTYPEhtml>

<html>

<head>

<metacharset=”UTF-8″>

<title>css3属性</title>

<styletype=”text/css”>

div.a{

width:200px;

height:200px;

margin:20pxauto;

border:1pxsolid#CCCCCC;

box-shadow:10px20px10px10px#f00;

}

</style>

</head>

<body>

<divclass=”a”></div>

</body>

</html>

水平阴影可以理解为偏左右哪个方向,如果加入inset,正数偏左,负数偏右,如果没有inset,正数偏右,负数偏左;

垂直阴影可以理解为偏上下哪个方向,如果加入inset,正数偏上,负数偏下,,如果没有inset,正数偏下,负数偏上;

总之,inset属性让水平、垂直阴影的方向与没有inset时相反。

如果只要实现单侧阴影,就得牺牲掉模糊效果,因为一旦模糊,颜色会扩散,效果会不明显。因为阴影从本质上来说是一个颜色块。0-10px00设置上方单边阴影;10px000设置右侧单边阴影。

用将width和height设置为0,通过border特性来实现三角形的效果的方法,想必很多人都实现过。但是如果要求三角形边缘具有阴影效果,这样一来以前的实现方式显然是不行,因为box-shadow属性对border内部的边缘是没有效果的。如果大家还想了解更多与之有关的信息,欢迎关注我们文军营销的官网。

推荐阅读

css样式 css样式语言特点 | 文军营销其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“...下一篇: css阴影 如何用CSS实现DIV块的阴影效果 最新文章 epub转txt的方法 EPUB...SEO诊断书分享——杨潇波 | 文军营销(3个月),应该增强app.下的关键词进阶排名,通过调整内链方面的优化实现规模效应...未来SEO css阴影 如何用CSS实现DIV块的阴影效果我们的服务 舆情监测 EPR口碑营销...css下划线 浅谈css自定义下划线 | 文军营销使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性...

copyright@2015上海文军信息技术有限公司沪ICP备10034044号-8公网安备31011202001046号网站地图