CSS3的文本阴影

CSS3中，text-shadow属性适用于文本阴影。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
 
<h1>Text-shadow effect!</h1>
 
<p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
 
</body>
</html>

CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
 
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
 
</body>
</html>

New Text Properties

属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

css3学习笔记之文本效果的更多相关文章

  1. css3学习总结5--CSS3文本效果

    CSS3 文本效果 1. text-shadow 2. word-wrap text-shadow属性使用方法 text-shadow属性使用方法如下所示. text-shadow:length le ...

  2. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  3. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  4. 十天精通CSS3学习笔记 part2

    第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...

  5. CSS3学习笔记（新属性）

    1. 边框(圆角边框.加阴影和用图片绘制) 新增加 border-radius  box-shadow  border-image .div1{ border:2px solid purple; bo ...

  6. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  7. css3学习笔记之效果

    <!DOCTYPE html> <html> <head> <style> #t1 { border-radius: 15px; width:60px; ...

  8. CSS3学习笔记（5）—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  9. [CSS3] 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Android学习笔记（3）

    今天我试着往应用里添加广告,结果adView一操作就闪退,换了很多种方法都不行. 最后解决过程有点坑爹,原来是还没setcontentview就开始adview了,哈哈 虽然我现在菜得不行,还没入门. ...

  2. CDOJ 483 Data Structure Problem DFS

    Data Structure Problem Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/proble ...

  3. thinkphp中的HTTP类实现下载

    public function test(){ import('ORG.Net.Http'); $filename="Uploads/v1.2.doc"; //exit($file ...

  4. Cache选型的一些思考

    Cache对于减轻DB负载有非常关键的数据.以下对经常使用的memcached和redis做个总结,便于技术选型. 1 memcached  (1) 支持的操作有限,支持经常使用的set,get,de ...

  5. [MODx] 2. Install some useful packages into ur MODx

    1. The package we might need: 2. Install the package: Select Installer Download Extras Install the p ...

  6. windows 下的命令行工具。。

    1.powershell window自带..右下角搜索..powershell 2.conemu https://code.google.com/p/conemu-maximus5/wiki/Dow ...

  7. Python学习 之 文件

    1.文件读写 python进行文件读写的函数是open或file file_handler=open(filename,,mode) (1)打开并读取文件 方式一:open() fo=open('/r ...

  8. linq小知识总结

    1linq的左连接查询 var boundList = from x in text.S_Outbound join y in text.S_Outbound_Per on x.Shipment_ID ...

  9. 损失函数(loss function) 转

    原文:http://luowei828.blog.163.com/blog/static/310312042013101401524824 通常而言,损失函数由损失项(loss term)和正则项(r ...

  10. cocos2d-x中使用sqlite

    在单机游戏中有几十个场景道具,每一个都有各自的状态(获得.未获得.获得个数)等等,如果在游戏中平凡涉及到这些道具的实时存储,那么使用文本就会稍慢.可以使用sqlite数据库来完成. 下载地址:http ...