2. CSS3 阴影的文字特效 CSS代码: <!DOCTYPE CSS><CSS lang="en"><head><meta charset="UTF-8"><title>
3. box-shadow 属性 CSS3box-shadow属性应用
可以用CSS3的阴影属性。 不过要支持IE6的话,加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;第三个值(10px)是设置模糊距离;black就是阴影的颜色啦;最后一个inset是在元素内部创建一个阴影,也就是内阴影了;删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果,在DIV层的区域边框添加阴影效果,看上去非常形象,但是实现起来并不是太难,CSS代码比较简洁,值得我们学习。盒子阴影的CSS实现方法《CSS3文本阴影 text-shadow》
结构代码:
<div class="h5course">欢迎沟通交流~HTML5学堂</div>样式代码:
html {background: #000
}
.h5course {
width: 400px
height: 200px
text-shadow: 1px 1px 0 #f96,
-1px -1px 0 #f96
background: #ccc
line-height: 200px
text-align: center
font-size: 30px
font-family: "微软雅黑"
}