2-文本新特性
语法
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
| 值 | 描述 | 测试 |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊的距离。 | 测试 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 30px 30px 0px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
word-wrap
word-wrap:break-word;允许长单词换行到下一行
<!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>
text-overflow：ellipsis 属性规定当文本溢出包含元素时发生的事情。
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>这个 div 使用 "text-overflow:clip"：</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
新的颜色表示法：
1background:colorName 采用颜色名
2background:#FF0 采用 十六进制
3background:rgb(100,255,100) 红绿蓝
4opacity:0.5; 透明度（容器）
5background:rgba(0,0,255,0.5) 背景透明
6text-fill-color:transparent;填充颜色透明 text-fill-color”就是文字填充颜色,而“text-stroke”就是文字描边
text-stroke:2px yellow;
7 HSL background:HSL(0,100%,50%)
8 HSLA
注意:HSL 色调饱和度亮度模式以另外一种不同的理念进行色彩的调 H色调 0~360 圆环形式 以角度表示 S 饱和度 0~1 之间的小数 L 亮度 0~1 之间的小数
<!DOCTYPE html>
<html>
<head>
<style>
#h2{
-webkit-text-fill-color:transparent;/*无色透明*/
-webkit-text-stroke:1px #000;
opacity:0.5; /*opacity*/
}
h1{
color:red;
-webkit-text-fill-color:yellow;/*字体填充色*/
-webkit-text-stroke:1px red;
background:HSL(100,100%,50%); /*HSL*/
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
<h1 id="h2">文本阴影效果！</h1>
</body>
</html>
