文本属性
1、阴影为text-shadow ：上下 左右 模糊度 颜色
text-shadow ： none | <length> none | [<shadow>, ]
* <shadow> 或none | <color> [, <color> ]*
text-shadow: 左右 上下 模糊度 颜色
<color> ： 指定颜色。
<length> ： 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> ： 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。
2、text-overflow ： clip | ellipsis
clip： 不显示省略标记（...），而是简单的裁切。
ellipsis： 当对象内文本溢出时显示省略标记（...）
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
3、word-wrap
word-wrap ： normal | break-word
取值：normal： 控制连续文本换行。
break-word： 内容将在边界内换行。如果需要，词内换行（word-break）也会发生。
说明：设置或检索当当前行超过指定容器的边界时是否断开转行。
text-shadow ： none | <length> none | [<shadow>, ]
* <shadow> 或none | <color> [, <color> ]*
text-shadow: 左右 上下 模糊度 颜色
<color> ： 指定颜色。
<length> ： 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> ： 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。
2、text-overflow ： clip | ellipsis
clip： 不显示省略标记（...），而是简单的裁切。
ellipsis： 当对象内文本溢出时显示省略标记（...）
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
3、word-wrap
word-wrap ： normal | break-word
取值：normal： 控制连续文本换行。
break-word： 内容将在边界内换行。如果需要，词内换行（word-break）也会发生。
说明：设置或检索当当前行超过指定容器的边界时是否断开转行。
下面这段代码就是其应用：
<!DOCTYPE html>
<html>
<head>
<title>阴影</title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 531px;
height: 427px;
background-color: #EEEDF3;
}
.c1{
float: left;
width: 531px;
height: 365px;
background-color: white;
margin-top: 62px;
}
.div1,.div2,.div3,.div4{
float: left;
width: 531px;
height: 73px;
border-bottom: 1px solid gray;
}
h4{ float: left;
font-size: 20px;
margin-left: 10px;
}
.div1>h5{
float: left;
font-size: 20px;
color: #B3B2B5;
margin-left: 40px;
line-height: 10px;
}
.div1>img{
float: left;
margin-left: 20px;
margin-top: 30px;
}
.right{
float: right;
width: 150px;
height: 73px;
background-color: #FD3D3A;
}
h3{
color: white;
text-align: center;
font-size: 30px;
line-height: 10px;
}
.div2>img,.div3>img,.div4>img{
float: left;
margin-left: 30px;
margin-top: 20px;
}
.div4>.img1,.div3>.img1,.div2>.img1{
float: right;
margin-top: 30px;
margin-right: 10px;
}
.div2>h5,.div3>h5,.div4>h5{
float: right;
margin-left: 30px;
font-size: 20px;
color: #B3B2B5;
line-height: 10px;
/*text-shadow: 0px 5px 1px green;*/
-webkit-box-reflect: below 0 -webkit-gradient(linear,0 0,50% 0%,from(transparent),color-stop(0, transparent),to(#000));
-mozt-box-reflect: below 0 -webkit-gradient(linear,0 0,0% 50%,from(transparent),color-stop(0, transparent),to(#000));
}
</style>
</head>
<body>
<div class="main">
<div class="c1">
<div class="div1">
<h4>I'm so off-screen</h4>
<h5>1 MB</h5>
<img src="sanxian.png">
<div class="right">
<h3>Delete</h3>
</div>
</div>
<div class="div2">
<img src="yuan.png">
<h4>I'm just fat</h4>
<img class="img1" src="sanxian.png">
<h5>1 MB</h5>
</div>
<div class="div3">
<img src="yuan.png">
<h4>I'm way fatter</h4>
<img class="img1" src="sanxian.png">
<h5>21 MB</h5>
</div>
<div class="div4">
<img src="yuan.png">
<h4>I'm not fat</h4>
<img class="img1" src="sanxian.png">
<h5>1 KB</h5>
</div>
</div>
</div>
<div class="div4">
<h5>wewqeqe</h5>
</div>
</body>
</html>当用到 text-shadow: 0px 5px 1px green; 时，其显示结果为：
当用到倒影属性时（WebKit是指谷歌兼容）
-webkit-box-reflect: below 0 -webkit-gradient(linear,0 0,50% 0%,from(transparent),color-stop(0, transparent),to(#000));结果为：<img src="https://img-blog.csdn.net/20141014191046934" alt="" />
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
