WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>前端样式>>使用CSS实现字体阴影效果

使用CSS实现字体阴影效果

[ 录入者:91ctc | 时间:2015-06-23 10:41:57 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

本文详细介绍使用CSS实现字体阴影效果的方法,主要使用text-shadow属性

text-shadow在CSS2中也有,只是当年浏览器兼容性不好。用的不多,CSS3中继续沿用了这个属性。使用它可以实现很多字体阴影效果。

用法:title_text{text-shadow:2px 2px 8px #bbb;} 

四个属性值分别代表阴影区距左距离距上距离阴影区面积大小阴影颜色

示例:

CSS部分

.title_text{text-shadow:2px 2px 8px #bbb;}

HTML部分

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体阴影-www.91ctc.com</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="title_text">这是有阴影的效果</div>
</body>
</html>

演示效果

兼容性说明:不兼容IE8及其IE8以下浏览器,不兼容火狐3.5以下浏览器,兼容谷歌2.0以上浏览器,兼容搜狗浏览器高速模式、兼容360浏览器极速模式。

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

下一篇:没有了!
您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号