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. 如何用boost::serialization去序列化派生模板类(续)

    在 如何用boost::serialization去序列化派生模板类这篇文章中,介绍了序列化派生类模板类, 在写測试用例时一直出现编译错误,调了非常久也没跳出来,今天偶然试了一下...竟然调了出来. ...

  2. Codeforces Round #327 (Div. 2) B. Rebranding 水题

    B. Rebranding Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/591/problem ...

  3. Codeforces Gym 100342E Problem E. Minima 暴力

    Problem E. MinimaTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100342/attac ...

  4. C# 强制关闭当前程序进程（完全Kill掉不留痕迹）

    C# 强制关闭当前程序进程(完全Kill掉不留痕迹) /// <summary> /// 运行DOS命令 /// DOS关闭进程命令(ntsd -c q -p PID )PID为进程的ID ...

  5. [PLL][PM]锁相环模拟相位解调

    %锁相环测试 %模拟相位解调 clear close all clc fs=1000; %采样率 tend=100; t=0:1/fs:tend; t(end)=[]; fc=1; %载波频偏 fb= ...

  6. 保存form配置信息INI

    (* 功能:IniFormState1 保存和读取 窗体的大小2 保存和读取 窗体在屏幕上的位置//让程序第1次出现在屏幕的中心点获取屏幕的中心点POSITION:poScreenCenter //不 ...

  7. Unity3D脚本--经常使用代码集

    1. 訪问其他物体 1) 使用Find()和FindWithTag()命令 Find和FindWithTag是很耗费时间的命令,要避免在Update()中和每一帧都被调用的函数中使用.在Start() ...

  8. CSAPP缓冲区溢出攻击实验(上)

    CSAPP缓冲区溢出攻击实验(上) 下载实验工具.最新的讲义在这. 网上能找到的实验材料有些旧了,有的地方跟最新的handout对不上.只是没有关系,大体上仅仅是程序名(sendstring)或者參数 ...

  9. 日志分析(五) PV&UV

    应用设计请求之初,对于url有一定的规划.因此,请求的url格式类似如下: /**/school/****?token=a66cb2a3-e0b7-4f0a-b332-********* token唯 ...

  10. c实例_挑战程序竞赛，蚂蚁

    #include <stdio.h> //蚂蚁的题目 int max(int a,int b) { int count; count=a>b?a:b; return count; } ...