HTML 学习笔记 CSS3 (文本效果)
text-shadow
语法
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是：
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
取值:
<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值
<color>：指定阴影颜色，也可以是rgba透明色
<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。
如下图所示：
说明：
可以给一个对象应用一组或者多组阴影效果。方法与前面的语法一样 用逗号隔开 text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。
浏览器的兼容性
我们来看一下实例：
首先给所有的demo一个公用的样式和类名
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#shadow{
width: 120px;
height: 50px;
border: 1px solid orange;
text-align: center;
vertical-align: bottom;
font-size: 17px;
text-shadow: 1px 1px 0px blue; }
</style>
</head>
<body>
<div id="shadow">
文字阴影效果
</div>
</body>
</html>
更详细的讲解 请移步 http://www.w3cplus.com/blog/52.html
CSS3文本换行
单词太长的话 就会超出某个区域 在CSS3中 word-wrap属性允许你允许强制文本换行 即使这意味着会对单词进行拆分。
实例：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pc {
width: 11em;
border: 1px solid orange;
border-bottom-left-radius: 8px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="pc">This paragraph contains a very long word:
thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</p> </body>
</html>
新的文本属性
HTML 学习笔记 CSS3 (文本效果)的更多相关文章
- css3学习笔记之文本效果
CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html ...
- css3学习总结5--CSS3文本效果
CSS3 文本效果 1. text-shadow 2. word-wrap text-shadow属性使用方法 text-shadow属性使用方法如下所示. text-shadow:length le ...
- Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
- 第七十八节，CSS3文本效果
CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow Opera ...
- CSS3：CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...
- W3Cschool学习笔记——CSS3教程
向 div 元素添加圆角: div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ ...
随机推荐
- 微信公众号里打开链接下载APP
嵌入这样的代码 <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.violationquery" target=&q ...
- C阶段【01】 - C基础
一.进制 进位方法:逢几进一(也就是几进制) 举例:十进制 12 : 二进制 0b(计算机前缀) 0b1011 : 八进制 0 073 :十六进制 0x 0xABCDEF 十进 ...
- xcode中info.plist文件相关问题
<一>关于提示http://访问网络不安全的解决方法 提示错误: App Transport Security has blocked a cleartext HTTP (http://) ...
- SQL并行与否的性能差异
比较两种代码,核心代码相同,其中一个使用变量保存查询出的结果,另一个直接输出.使用同一变量时,强迫SQL放弃了并行,使用了循环. 测试结果 表'#1699586C'.扫描计数1,逻辑读取186 次 ...
- 百度地图TILE算法
Creating primary keyvar LLBAND2 = [75, 60, 45, 30, 15, 0]; var LL2MC2 = [[-.0015702102444, 111320.70 ...
- git代码库误操作还原记录
先做一些前情提要: 我们项目使用git作为代码管理,同时为了操作更方便,安装了乌龟git(tortoiseGit)工具.以下几乎所有操作都是在乌龟git上进行. 我们的项目是分阶段完成的,在完成上一阶 ...
- PHP 5.3.0以上推荐使用mysqlnd驱动
1. 什么是 mysqlnd 驱动 ? PHP 手册上的描述 : MySQL Native Driver is a replacement for the MySQL Client Library ( ...
- Linux基本操作命令之文件查看cat more less tail head
cat 参考之前博客:Linux基础命令之cat使用方法大全 more 命令 命令:more使用权限:所有使用者使用方式:more [选项] filename说明:类似于cat,不过会一页一页的显示内 ...
- Java基础语法总结1
一.标识符及字符集 Java语言规定标识符是以字母.下划线"_"或美元符号"$"开始,随后可跟数字.字母.下划线或美元符号的字符序列.Java标识符大小写敏感, ...
- ixgbe 82599 固定源与目标, UDP, 64字节小包, 1488w pps 单核CPU软中断sirq 100%
ixgbe 82599 固定源与目标, UDP, 64字节小包, 1488w pps 单核CPU软中断sirq 100% 注: 测试使用, 正常应用不要开启 五元组不同, 开启ntupleethtoo ...