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自定义radiobutton(文字靠左，选框靠右)

    <RadioButton android:id="@+id/rb_never" android:layout_width="fill_parent" an ...

  2. Asp.Net+Extjs实现登录

    通过对Ext的学习,发现学习分三部曲:1.看官网的Demo,宏观了解Ext能做什么:2.看相关书籍,做理论指导:3.实现官网的Demo,体会Ext的真谛. 在完毕了第一.二部后,如今我们须要做的是实现 ...

  3. oc-05-对象的创建

    // 11-[掌握]创建一个对象并访问成员变量 #import <Foundation/Foundation.h> //声明 @interface Person : NSObject//类 ...

  4. slf4j-simple的配置

    slf4j-simple是一款日志框架 它既可通过VM arguments来配置也可通过在classpath放置simplelogger.properties文件来配置 通过VM arguments来 ...

  5. UNIX标准化及实现之POSIX标准必需头文件

    POSIX标准定义的必需头文件 头文件 说明 <dirent.h> 目录项 <fcntl.h> 文件控制 <fnmatch.h> 文件名匹配类型 <glob. ...

  6. ROC和AUC介绍以及如何计算AUC

    原文:http://alexkong.net/2013/06/introduction-to-auc-and-roc/ 为什么使用ROC曲线 既然已经这么多评价标准,为什么还要使用ROC和AUC呢?因 ...

  7. 实例源码--Android旋转式菜单(效果很炫)

    下载源码   技术要点: 1.旋转式菜单功能实现 2.动画的应用 3.自定义控件的使用 ...... 详细介绍: 1. 旋转式菜单功能实现 本套例子通过自定义布局与动画的综合使用,实现了旋转式菜单效果 ...

  8. php执行效率相关的语句

    一:字符替换: strtr > str_replace > preg_replace 注意: 1:一般用strtr函数的这种形式:string strtr ( string $str , ...

  9. App Thinning

    App Thinning 由于项目中需要开启Bitcode编译,之前对Bitcode也有些误区,故整理了下相关知识,仅供参考,如有不对,还请指出. 当前 iOS App 的编译打包方式是把适配兼容多个 ...

  10. 给jdk写注释系列之jdk1.6容器(7)-TreeMap源码解析

    TreeMap是基于红黑树结构实现的一种Map,要分析TreeMap的实现首先就要对红黑树有所了解.      要了解什么是红黑树,就要了解它的存在主要是为了解决什么问题,对比其他数据结构比如数组,链 ...