注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS3 文本阴影属性text-shadow  

2014-09-14 16:31:39|  分类: CSS3属性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS3 文本阴影属性text-shadow

欢迎学习交流---梦幻雪冰
要实现的效果如下:
CSS3 文本阴影属性text-shadow - 梦幻雪冰 - 梦幻雪冰
 
语法:text-shadow: h-shadow v-shadow blur color;(多组阴影之间用逗号分隔

具体就不多说了,看下代码吧~:欢迎学习交流---梦幻雪冰

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.wrap p {
float: left;
width: 600px;
height: 200px;
line-height: 200px;
font-size: 60px;
text-align: center;
}
.wrap p:nth-child(1) {
background: #000;
text-shadow:
-1px -1px 1px #fff,
-1px -3px 3px #fff,
-1px -4px 4px #fff;
}
.wrap p:nth-child(2) {
background: #999;
color: #a20841;
text-shadow:
0 -1px 5px rgba(162, 8, 65, 0.8),
0 -6px 10px rgba(162, 8, 65, 0.8),
0 -10px 15px rgba(162, 8, 65, 0.8),
0 -16px 20px rgba(162, 8, 65, 0.8);
}
.wrap p:nth-child(3) {
background: #adcf94;
color: #12a0db;
text-shadow:
-1px -1px #444,
-2px -2px #444,
1px 1px #fff,
2px 2px #fff;
}
.wrap p:nth-child(4) {
background: #000;
color: #fff;
text-shadow:
0 0 5px #f0f,
0 0 20px rgba(255, 0, 255, 0.8),
0 0 30px rgba(255, 0, 255, 0.8),
0 0 40px rgba(255, 0, 255, 0.8);
}
</style>
</head>
<body>
<div class="wrap">
<p>梦幻雪冰</p>
<p>独行冰海</p>
<p>梦幻雪冰</p>
<p>独行冰海</p>
</div>
</body>
<script type="text/javascript"></script>
</html>

注意:上面的代码用到了CSS3的选择器
欢迎学习交流---梦幻雪冰
  评论这张
 
阅读(91)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017