CSS3 文本效果2024最新入门教程, 在这套课程里你可以学到关于CSS3 文本效果,浏览器支持,CSS3的文本阴影,实例,CSS3 box-shadow属性,实例,

CSS3 文本效果

CSS3 文本效果

CSS3中包含几个新的文本特征。

在本章中您将了解以下文本属性:

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

浏览器支持

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

CSS3的文本阴影

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

Text shadow effect!

您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:

OperaSafariChromeFirefoxInternet Explorer

实例

给标题添加阴影:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

尝试一下 »


CSS3 box-shadow属性

CSS3中CSS3 box-shadow属性适用于盒子阴影

实例

div {
box-shadow: 10px 10px;
}

尝试一下 »
CSS3 文本效果
10/30