html页面下的阴影,html5/css3文本阴影(text-shadow)详解及示例
text-shadow属性用于设置文本内容的阴影效果或模糊效果。目前,text-shadow属性已经得到Safari浏览器、Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看,大部分移动平台的Web浏览器都能得到很好的支持。
text-shadow的语法和box-shadow的语法基本上一致:text-shadow : none | none | [, ] * 或none | [, ]*
相关属性 : 无
:指定颜色。
:由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
:由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow
text-shadow是可以省略前缀的几个CSS属性之一,类似的还有box-shadow,它必须应用于文本,并它们有相同的四个参数:x-offset 水平位移
y-offest 垂直位移
blur 模糊值
color of shadow 阴影颜色
h1 {
text-shadow: 0 1px 0 #fff;
color: #292929;
}
如下代码为使用text-shadow的简单示例:
div{
text-shadow:5px -10px 5px red;
color:#666;
font-size:16px;
}
严格来说 text-shadow不能算是css3的属性。实际上在css2.0时就已经有这个属性。不过不能被浏览器广泛支持。随着html5和css3的兴起。text-shadow也跟着受到重视。text-shadow的作用是在不使用图片的情况下,通过设置阴影或者模糊字体来增加文字的质感。
在html5和css3迅速推广的今天,掌握text-shadow这个简单的属性可以说是势在必行了。
常见的效果实例1:
textshadow
h2 {margin:0;padding:0;text-align:center;padding:10px 0;background-color:#ccc;}
.sp1 {color:#fff;text-shadow: 0 0 20px red;}
.sp2 {text-shadow: -1px -1px white, 1px 1px #333;color:#ccc;}
.sp3 {text-shadow: 1px 1px white, -1px -1px #777;color:#ccc;}
.sp4 {color: transparent; text-shadow: 0 0 3px #f96;}
.sp5 {color: transparent; text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;}
.sp6{color: #fff; text-shadow: -1px -1px rgba(197, 223, 248,0.8),-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),-6px -6px rgba(197, 223, 248,0.8);}
设置多个阴影
设置多个阴影
设置多个阴影
设置多个阴影
设置多个阴影
设置多个阴影
示例2:/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
/*
#text
{
text-shadow:2px 2px 0px orange;
}
#text1
{
text-shadow:2px 2px 5px orange;
}
#text2
{
text-shadow:2px 2px 5px orange,-2px 2px 5px green;
}
/*]]>*/
没有阴影
有阴影
阴影叠加
html页面下的阴影,html5/css3文本阴影(text-shadow)详解及示例相关推荐
- html5 css3自适应,网页自适应过程详解-HTML5+CSS3
1.之前写: 2.字体大小不变,建议使用px,这点与网上的教程不同: 3.宽度设置:如果之前的是900px,那修改成:width:100%;max-width: 900px; 因为设置padding: ...
- 微信小程序文本组件text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: <text >测试使用</text> 1 基 ...
- html渐变线条代码,css3线性渐变语法的详解(代码示例)
本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 线性渐变的完整语法:.demo { background: line ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- HTML5实现视频直播功能思路详解
HTML5实现视频直播功能思路详解 最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
- android中的TextView组件,Android-TextView文本视图控件详解
TextView是Android开发当中运用到最多的控件之一,显示一行或者多行文本,也可以给上下左右设置图片,并且结合SpannableString和其子类可以做到图文混排. TextView文本视图 ...
- linux下grep文件内容搜索工具及基本正则表达式详解
linux下grep文件内容搜索工具及基本正则表达式详解 grep命令: 根据模式(文本字符和基本正则表达式的元字符组合而成之匹配条件)搜索文本, 并将符合模式的文本行显示出来. 格式:grep [选 ...
- python实现文本编辑器_Python实现文本编辑器功能实例详解
这篇文章主要介绍了Python实现的文本编辑器功能,结合实例形式详细分析了基于wxpython实现文本编辑器所需的功能及相关实现技巧,需要的朋友可以参考下 本文实例讲述了Python实现的文本编辑器功 ...
最新文章
- .NET程序员迈向卓越的必由之路
- python 批量处理文件重命名
- 关于session共享
- 用tinyscript解一些典型算法题,小试牛刀
- shell脚本中的坑
- Tomcat与Gzip与缓存
- Fread 和fwrite的参数不同,返回值不同
- android的颜色渐变动画效果图,Android简单实现一个颜色渐变的ProgressBar
- Golang并发读取超大文件
- Sphinx 初始化项目
- 习题3.10 汉诺塔的非递归实现 (25分)
- 3.3 其他因素3.3.1 Fork子进程
- Java的常用Swing外观类总结
- VC知识库搜索ADO
- 简单介绍企业erp系统究竟是什么?
- ubuntu设置maven环境变量
- SD/SDHC卡下载UBOOT 的注意事项
- C 实现黑客帝国数字雨
- 上传声音 微信小程序_图文详解微信小程序中调用录音功能和音频播放的方法...
- 【Gym - 100482B Farmer 】 思维