码迷,mamicode.com
首页 > Web开发 > 详细

css3学习总结1--CSS3文本效果

时间:2015-07-06 16:00:56      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

CSS3 文本效果

  • 1. text-shadow
  • 2. word-wrap

text-shadow属性使用方法

text-shadow属性使用方法如下所示。

text-shadow:length length length color

  其中,前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径,color指阴影的颜色。

下面是一个text-shadow属性的使用示例。在该示例中给一段红色文字绘制灰色阴影。其中阴影离开文字的横方向距离和纵方向距离均为5个像素。

.calssName
{
  text-shadow:5px 5px 5px gray;
  color:red;
  font-size:50px;
  font-weight:bold;
}

位移距离

text-shadow属性所使用的参数中,前两个参数为阴影离开文字的横方向位移距离与纵方向位移距离。

使用text-shadow属性时必须要指定这两个参数,可以对这两个参数指定负数值

示例:

.className
{
  text-shadow:-15px 10px 5px gray;
  color:navy;
  font-size:50px;
  font-weight:bold;
}

  

指定多个阴影

可以使用text-shadow属性来给文字指定多个阴影,并且针对每个阴影使用不同颜色。

指定多个阴影时使用逗号将多个阴影进行分隔。到目前为止,只有Firefox浏览器、Chrome浏览器及Opera浏览器对这个功能提供支持。

示例代码

为文字依次指定了桔色、黄色及绿色阴影,同时也为这些阴影指定了适当的位置。

.className{
   text-shadow:10px 10px #f39800,
        40px 35px #fff100,
        70px 60px #c0ff00;
color:navy;
font-size:50px;
font-weight:bold;
}

  

自动换行

在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

p {word-wrap:break-word;}

  

css3学习总结1--CSS3文本效果

标签:

原文地址:http://www.cnblogs.com/xuange306/p/4624456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!