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. Codeforces Gym 100203E E - bits-Equalizer 贪心

    E - bits-EqualizerTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest ...

  2. Android开发 侧边滑动菜单栏SlidingMenu结合Fragment

    SlidingMenu是一个开源项目, https://github.com/jfeinstein10/SlidingMenu .功能是创建侧边滑动菜单栏,效果类似人人Android客户端,可点击按钮 ...

  3. Python的基础--对象 转

      对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识 ...

  4. slots - Python的结构体 转

          上个月看了篇文章 “SAVING 9 GB OF RAM WITH PYTHON’S __SLOTS__”,原来Python也有类似结构体的东东.拖了一个月才写这篇,是因为太久没看pyth ...

  5. Maven 插件开发（一）

    项目在重构之后,想由ant切换到maven,在转换的过程中遇到一个问题.因为项目是基于OSGi的架构,而OSGi在运行时是依赖于插件环境的,bundle之间存在package依赖.而maven是基于d ...

  6. Python_爬虫2

    URLError异常处理 大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本 ...

  7. IOS横竖屏控制与事件处理

    公司App里面有个需求,即所有界面都是竖屏,且不允许横屏切换,唯独有一个图表界面允许横屏.那么,根据此需求处理如下: 首先,确保App本身应该允许转屏切换: 再次,我的App里面都是走UINaviga ...

  8. Android 高级UI设计笔记08：Android开发者常用的7款Android UI组件（转载）

    Android开发是目前最热门的移动开发技术之一,随着开发者的不断努力和Android社区的进步,Android开发技术已经日趋成熟,当然,在Android开源社区中也涌现了很多不错的开源UI项目,它 ...

  9. android源码编译常见错误

    错误1:You are attempting to build on a 32-bit system. Only 64-bit build environments are supported bey ...

  10. linux-cat/less/more/tail

    都可以查看文件 不同点 cat:全部查看不分屏显示 定位到ccc结尾的那行 [root@besttest tmp]# cat yumyum.log|grep ccc$ aaaaaaaaaaaaaaaa ...