text-shadow的用法详解
1.兼容性：text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
2.text-shadow：5px 5px 5px #fff;
x轴 （可正可负） y轴（可正可负） 模糊距离（正值） 阴影颜色
注意，正值使阴影往右/下移动，负值往左/上移动
阴影的颜色是可选的，如果颜色没填，就使用从父级继承的颜色。然而，在不同的浏览器下可能会有所不同。
效果一：外发光
html：
<div class="text1">
<span class="son son1">1.外发光</span> <br /> text-shadow:0 0 20px #f00;
</div>
CSS：
.text1{
font-family: helvetica;
padding:50px 0px;
color:#00f;text-align:center;
background:#000;
}
.son{
font-size: 120px;
color:#000;
font-weight: bold;
}
.son1{
/*外发光 */
text-shadow:0 0 20px #f00;
}
效果：
效果二：辉光
CSS：
.son2{
/*辉光效果*/
text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;
}
效果三：投影
.son3{
/*投影*/
text-shadow:0 2px 2px #999;
}
效果四：浮雕
.son4{
/*浮雕*/
color:#eee;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
效果五：模糊
.son5{
/*模糊xiaoguo*/
color: transparent;
text-shadow:0 0 8px #ffaad5;
}
效果六：模糊加浮雕
.son6{
/*6.模糊加浮雕*/
/*color:#ff95ca;*/
color: transparent;
text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
}
效果七：影子
.son7{
/*7.影子*/
color:#9d9d9d;
text-shadow: 1px 1px 0 #adadad;
}
效果八：描边
.son8{
/*8.描边*/
text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
}
效果九：3D效果
.son9{
/*9.3D效果上*/
color: #fff;
text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
}
效果十：3D效果
.son10{
/*10.3D效果下*/
color:#fff;
text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
}
效果十一：D效果
.son11{
/*11.3D效果*/
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}
效果十二：文字补色
.son12{
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}
效果十三：火火火
.son13{
/*火火*/
text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;
}
总结：代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上机练习</title>
<style type="text/css">
.text1{
font-family: helvetica;
padding:50px 0px;
color:#00f;text-align:center;
background:#000;
}
.text2{
background: #333;
}
.text3{
background: #ccc;
}
.text4{
background:#5b5b5b;
}
.son{
font-size: 120px;
color:#000;
font-weight: bold;
}
.son1{
/*外发光 */
text-shadow:0 0 20px #f00;
}
.son2{
/*辉光效果*/
text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2; }
.son3{
/*投影*/
text-shadow:0 2px 2px #999;
}
.son4{
/*浮雕*/
color:#eee;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
.son5{
/*模糊xiaoguo*/
color: transparent;
text-shadow:0 0 8px #ffaad5;
}
.son6{
/*6.模糊加浮雕*/
/*color:#ff95ca;*/
color: transparent;
text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
}
.son7{
/*7.影子*/
color:#9d9d9d;
text-shadow: 1px 1px 0 #adadad;
}
.son8{
/*8.描边*/
text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
}
.son9{
/*9.3D效果上*/
color: #fff;
text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
}
.son10{
/*10.3D效果下*/
color:#fff;
text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
}
.son11{
/*11.3D效果*/
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}
.son12{
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}
.son13{
/*火火*/
text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<div class="text1">
<span class="son son1">1.外发光</span> <br />text-shadow:0 0 20px #f00;
</div>
<div class="text1">
<span class="son son2">2.辉光效果</span> <br />text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;
</div>
<div class="text1 text2">
<span class="son son3">3.投影</span> <br />text-shadow:0 2px 2px #333;
</div>
<div class="text1 text3">
<span class="son son4">4.浮雕</span> <br />
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
</div>
<div class="text1">
<span class="son son5">5.模糊xiaoguo</span> <br />text-shadow:0 0 8px #ffaad5;
<div class="text1 text3">
<span class="son son6">6.模糊加浮雕</span> <br />text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
</div>
<div class="text1 text4">
<span class="son son7">7.影子xiao</span> <br />text-shadow: 1px 1px 0 #adadad;
</div>
<div class="text1">
<span class="son son8">8.描边XIAOS</span> <br />text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
</div>
<div class="text1">
<span class="son son9">9.3D效果上</span> <br /> text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
</div>
<div class="text1">
<span class="son son10">10.3D效果下</span> <br />text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
</div>
<div class="text1">
<span class="son son11">11.3D效果</span> <br /> text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
</div>
<div class="text1">
<span class="son son12">12.文字补色3D</span> <br />color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
</div>
<div class="text1">
<span class="son son13">13.text火火火</span> <br />text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
</div>
</body>
</html>
text-shadow的用法详解的更多相关文章
- @RequestMapping 用法详解之地址映射
@RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...
- 【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- Extjs Window用法详解
今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...
- jquery之insertBefore(),insertAfter(),prependTo(),appendTo()用法详解
导航: 1,insertBefore(),insertAfter(),prependTo(),appendTo()这四个函数用法几乎一样 2, 与之相对的有四个函数:Before(),After(), ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- Android GLSurfaceView用法详解（二）
输入如何处理 若是开发一个交互型的应用(如游戏),通常需要子类化 GLSurfaceView,由此可以获取输入事件.下面有个例子: java代码: package eoe.ClearTes ...
- 深入PHP EOF(heredoc)用法详解
介绍下使用EOF heredoc方式,输出长段内容的方法, <?php $name = '姓名'; print <<<EOT <html> <head> ...
随机推荐
- jQuery源代码解析（1）—— jq基础、data缓存系统
闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...
- zabbix学习系列之基础概念
触发器 概念 "监控项"仅负责收集数据,而通常收集数据的目的还包括在某指标对应的数据超出合理范围时给相关人员发送警告信息,"触发器"正式英语为监控项所收集的数据 ...
- 网络安全-安全散列函数，信息摘要SHA-1，MD5原理
-----------------------------------------------欢迎查看网络安全连载博客-----------------------------------[网络安全] ...
- HDU 5067 Harry And Dig Machine（状压dp）
HDU 5067 Harry And Dig Machine 思路:因为点才10个,在加上一个起点,处理出每一个点之间的曼哈顿距离,然后用状压dp搞,状态表示为: dp[i][s],表示在i位置.走过 ...
- javascript闭包具体解释
今天我们从内存结构上来解说下 javascript中的闭包概念. 闭包:是指有权訪问另外一个函数作用域中的变量的函数. 创建闭包的常见方式就是在一个函数内部创建另外一个函数. 在javascript中 ...
- socket简单理解
要想理解socket首先得熟悉一下TCP/IP协议族, TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协议,定义了主 ...
- [swift实战入门]手把手教你编写2048(一)
苹果设备越来越普及,拿着个手机就想捣鼓点啥,于是乎就有了这个系列,会一步一步教大家学习swift编程,学会自己做一个自己的app,github地址:https://github.com/scarlet ...
- PH_Pooled Featrues Classification MIREX 2011 Submission
Abstract Principal Mel-Spectrum Components (Feature) Temporal Pooling Functions (Model) Single Hidde ...
- 常用Lunix命令
计算机 1.硬件系统 输入单元.输出单元.算术逻辑单元.控制单元.记忆单元 中央处理单元:CPU(算术逻辑单元.控制单元) 电源.主板.CPU.内存(RAM).硬盘.(声卡.显卡.网卡)(集成在主板上 ...
- linux常见基础问题
1,32位与64位的区别,怎么查看系统版本? 32位相比于64位处理速度更慢一些,64位同样也比32位更占内存.用户体验上没有区别:用uname -a 查看系统版本信息 2,swap分区的作用是什么 ...