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. vector 与map的下标操作

    1.vector的下标操作不会添加元素,只能针对已经存在的元素操作. 2.map的下标操作具有副作用,key不存在,会在map中添加一个具有该key的新元素,新元素的value使用默认构造方法. 3. ...

  2. Get和Post的参数传值

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  3. Chrome Apps将可以打包成iOS或Android应用

    Chrome Apps 将可以在 iOS 和 Android 设备上独立运行了.开发者只要使用 Google今天 提供的工具集(toolchain)将自己的 Web App 打包,并将生成的应用上传到 ...

  4. 经常使用的android弹出对话框

    我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其它平台开发经验的朋友都会知道,大部分的平台都仅仅提供了几个最简单的实现,假设我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承 ...

  5. Java中Scanner的使用方法

      Scanner是SDK1.5新增的一个类,但是使用该类创建一个对象.Scanner reader=new Scanner(System.in); 然后reader对象调用下列方法(函数),读取用户 ...

  6. SAP BW中的增强(转)

    根据所了解的资料,BW中的有关增强可分为五部分,如下: 1.  数据抽取增强,即在标准数据源中加入数据源中所不存在的字段,或者标准数据源不存在所需数据而需要自定义数据源,相关的事务代码有RSO2(用于 ...

  7. ptrace x64 转

    #include <sys/ptrace.h> #include <sys/types.h> #include <sys/wait.h> #include < ...

  8. 【ZZ】超全面的设计模式总结

    http://www.cnblogs.com/chenssy/p/3357683.html#rd

  9. 服务器控件HyperLink的NavigateUrl绑定传参问题

    <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# Eval("ProjectID","Mar ...

  10. vs2010 编译Qt5.2 rc1

    首先要准备一些依赖: 下载Qt 5.2.0 rc版的源码 qt-everywhere-opensource-src-5.2.0-rc1.7z 并解压出来, 我的路径为D:\qt5\qt-src-5.2 ...