首页 > web前端 > html/css/css3 > Css3文本属性text-shadow、text-overflow
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-13

Css3文本属性text-shadow、text-overflow

文章目录 [收起]

要知道一点的是Css3比css2.0中文本text样式更丰富,如text-shadowtext-overflow,下面就来了解一下css3中新增的文本属性。

文本阴影text-shadow

语法:

text-shadow: x y distance color

取值:

  • x:必需,x轴偏移量,允许负值。
  • y:必需。y轴偏移量,允许负值。
  • distance:可选。模糊的距离。
  • color:可选。阴影的颜色

说明:

向文本添加一个或多个阴影,该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定,省略的长度是 0。

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
</head>
<body>
<div style="text-shadow:1px 1px 1px #555;color:#f30; ">firefox中text-shadow中正常</div>
</body>
</html>

text-shadow firefox正常 text-shadow chrome

通过示例我们看到text-shadow在firefox中是正常的,在chrome中有bug。

文本溢出text-overflow

语法:

text-overflow: clip|ellipsis|string;

取值:

  • clip:不显示省略标记(…),而是简单的裁切。
  • ellipsis:当对象内文本溢出时显示省略标记(…)。
  • string:当对象内文本溢出时使用string显示省略标记,测试firefox中有效。

说明:

  • 设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。
  • text-overflow需要强制文本在一行内显示(white-space:nowrap)。

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
div{white-space:nowrap; overflow:hidden; width:10em;border:solid 1px #444;margin:5px 0px;}
div:hover{text-overflow:inherit;overflow:visible;}
#div1{text-overflow:clip;}
#div2{text-overflow:ellipsis;}
#div3{text-overflow:'~~~';}
</style>
</head>
<body>
<p>text-overflow:clip</p>
<div id="div1">Css3 text-overflow文本溢出测试</div>
<p>text-overflow:ellipsis</p>
<div id="div2">Css3 text-overflow文本溢出测试</div>
<p>text-overflow:string 测试在firefox中有效</p>
<div id="div3">Css3 text-overflow文本溢出测试</div>
</body>
</html>

text-overflow chrome效果图 text-overflow firefox效果图

 

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*