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> ...
随机推荐
- vi，vim的基本使用方法
"i”插入 "/" 查找 "wq"保存退出 "q!"不保存退出
- oracle事务处理及实例演示jdbc操作批量删除
事务 作为逻辑处理的基本单位,对于数据库操作来说由一条或者多条sql语句来构成.当然还有针对非数据库操作的,如在计算机中设置的还原点即是一个非常好的应用. 对于事务的基本性质在还有一篇中有所叙述:SQ ...
- redis 事务 及发布于订阅功能
事务: Redis事务可以一次执行多个命令,事务具有以下特征: 1.隔离操作:事务中的所有命令都会序列化.按顺序地执行,不会被其他命令打扰. 2.原子操作:事务中的命令要么全部被执行,要么全部都不执行 ...
- MariaDB ----单表查询
1>按一定条件查询某字段的数据 (where) ; ( 查询 id > 的数据) #补充: ; 注意“ select * from students1: (此命令需谨慎使用, 数据量大 ...
- APICloud平台的融云2.0集成
融云2.0的官方文档地址:http://docs.apicloud.com/端API/开放SDK/rongCloud2 项目须要IM模块,最后还是选择了融云.在iOS原生开发中,融云sdk集成了聊天界 ...
- ubuntu12.04安装NVIDIA显卡驱动和CUDA
1.安装显卡驱动 vim /etc/modprobe.d/blacklist.conf #编辑该文件 blacklist nouveau #行末添加,禁用原来的显卡驱动 apt-get install ...
- initial ram disk
1 什么是initial ram disk 它就是一个做好了的文件系统,其存储空间是ram.在kernel启动的第一个阶段,会被mount成根文件系统. 2 为什么需要initial ram disk ...
- Python执行系统命令并获得输出的几种方法
[root@a upfc]# ./ffmpeg-linux64-v3.3.1 -i a.mp3 ffmpeg version N-86111-ga441aa90e8-static http://joh ...
- 编译Ruby2.0 问题解决
compiling readline.creadline.c: In function ‘Init_readline’:readline.c:1886:26: error: ‘Function’ un ...
- 7章 Admin
Admin这个东西本身就已经存在于我们的项目中,是Django自己创建的.admin是Django自带的一个APP. # Application definition INSTALLED_APPS = ...