文本的阴影样式、盒子阴影样式、文字溢出和换行的控制
- text-shadow
- box-shadow
- text-overflow
- overflow-wrap
- word-break
text-shadow
属性 text-shadow 用于给文本添加阴影，语法为：
text-shadow:水平阴影 垂直阴影 模糊阴影 阴影颜色
- 水平阴影：规定水平阴影的位置（阴影与文本的水平偏移，正值向右偏移，负值向左偏移），必选项
- 垂直阴影：规定垂直阴影的位置（阴影与文本的垂直偏移，正值向下偏移，负值向上偏移），必选项
- 模糊阴影：规定模糊的距离，可选项;值越大，模糊半径越大，阴影也就越大越淡
- 阴影颜色：规定阴影颜色，可选项；如不规定该项的值，则使用 UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种。
.shadow1{
margin: 50px;
color: rgb(14, 11, 194);
text-shadow: 0px 20px 1px #000;
}
.shadow2{
margin: 50px;
color: rgb(14, 11, 194);
text-shadow: -20px -20px 7px #000;
}
.shadow3{
margin: 50px;
color: rgb(14, 11, 194);
text-shadow: 0 0 50px #000;
}
.shadow4{
margin: 50px;
color: rgb(14, 11, 194);
text-shadow: -40px 0 10px red,0 -40px 10px #000,40px 0 10px blue,0 40px 10px yellow;
}
水平和垂直阴影都为正值，阴影呈现在原文本右下方
水平和垂直阴影都为负值，阴影呈现在原文本左上方
没有设置水平与垂直阴影，阴影扩散的范围就是模糊半径的范围
多阴影，设置了上下左右四个边的阴影
box-shadow
属性 box-shadow 用于给盒子添加阴影，语法与 text-shadow 有些相似：
box-shadow:水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 inset；
与 text-shadow 相比，水平阴影、垂直阴影、模糊阴影的作用和 text-shadow 的对应属性相同，另外 box-shadow 多了阴影尺寸和 inset。
- 水平阴影：规定水平阴影的位置（阴影与盒子的水平偏移，正值向右偏移，负值向左偏移），必选项
- 垂直阴影：规定垂直阴影的位置（阴影与盒子的垂直偏移，正值向下偏移，负值向上偏移），必选项
- 模糊阴影：规定模糊的距离，可选项；值越大，模糊半径越大，阴影也就越大越淡
- 阴影尺寸：阴影尺寸就是阴影外延出去的总长度
- 阴影颜色：规定阴影颜色，可选项；如不规定该项- 的值，则使用 UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种
- inset：阴影默认是向外发散的，inset 参数的作用就是使外阴影变为内阴影
注：参数的顺序不要乱写。
.shadow1{
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #EEE8CD;
box-shadow:0 0 0 10px #000;
}
.shadow2{
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #EEE8CD;
box-shadow: 20px 20px 10px #000;
}
.shadow3{
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #EEE8CD;
box-shadow: -20px -20px 10px #000;
}
.shadow4{
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #EEE8CD;
box-shadow: 0 0 100px #000 inset;
}
.shadow5{
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #EEE8CD;
box-shadow: -40px 0 100px red,0 -40px 100px #000,40px 0 100px blue,0 40px 100px yellow;
}
将除阴影尺寸之外的数值都设置为0，可以看到阴影尺寸就是阴影外延出去的长度，相当于增加了 border 的宽度。需要注意的是，box-shadow 不占据空间，所以阴影尺寸虽然增加了 border 的宽度，但它并不是 border。
水平阴影和垂直阴影都为正值，阴影在原盒子右下方
水平阴影和垂直阴影都为负值，阴影在原盒子左上方
除了模糊阴影外的值都设置为 0 ，另外使用参数 inset ，阴影在盒子内部
盒子的多阴影，设置了上下左右四个阴影
text-overflow
文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值：
- clip ：修剪文本。
- ellipsis ：显示省略符号来代替被修剪的文本。
- string ：使用给定的字符串来代替被修剪的文本。
.item1{
white-space: nowrap;/*规定段落中的文本不进行换行*/
border:1px solid;
width: 150px;
overflow: hidden;
text-overflow: clip;
}
.item2{
white-space: nowrap;
border:1px solid;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.item3{
white-space: nowrap;
border:1px solid;
width: 150px;
overflow: hidden;
text-overflow: "i'm string";
/*字符串替代溢出字符的方式目前只有 Firefox 9.0+ 支持，大部分浏览器都不支持该溢出替换方式。*/
}
hhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhh
overflow-wrap & word-break
overflow-wrap 和 word-break 都可以起到对单词的换行作用，前者用来表明是否允许浏览器在单词内进行短句，例如出现了一个很长的 url 或者单词，由于找不到自然段据点空格或标点符号而产生了溢出，这时候就可以使用 overflow-wrap 来解决这个问题；word-break 则是用于表明怎样在单词内进行短句。
overflow-wrap 常用的有两个取值：
- normal:浏览器保持默认处理
- break-word:允许在长单词内进行换行
.div1{
margin: 50px;
border: 1px solid;
width: 100px;
overflow-wrap: break-word;
}
.div2{
margin: 50px;
border: 1px solid;
width: 100px;
overflow-wrap: normal;
}
Hello world!veryveryveryveryverylongword isn't it?
Hello world!veryveryveryveryverylongword isn't it?
可以看到，句子中出现了一个很长的单词，属性 overflow-wrap 设置为 break-word ，即允许从中间断开，没有出现溢出的情况，在句子开始的 Hello World！中，可以看到这两个单词是处于两行，也就是说如果把它们放在一行内会出现溢出的情况，break-word 不会拆散短单词，所以这里出现了换行；属性 overflow-wrap 设置为 normal 时，采用浏览器默认的换行方式，出现了溢出。
word-break 有三个取值：
- normal:保持浏览器默认换行方式
- break-all:表明对于 non-CJK（非中文/日文/韩文）文本，可在任意字符间断行
- keep-all:CJK 文本不断行，non-CJK 文本表现同 normal 。展开一点来说就是只能在半角空格或连字符处换行,也就是说，keep-all 只能在语句的正常语句起始处和单词起始处换行，如果 non-CJK 单词过长，使用值 keep-all 就有可能造成文本框溢出
.item1{
margin: 20px;
border: 1px solid;
width: 100px;
word-break: normal;
}
.item2{
margin: 20px;
border: 1px solid;
width: 100px;
word-break: break-all;
}
.item3{
margin: 20px;
border: 1px solid;
width: 100px;
word-break: keep-all;
}
我爱学习，我爱学习！Hello world!veryveryveryveryverylongword isn't it?
我爱学习，我爱学习！Hello world!veryveryveryveryverylongword isn't it?
我爱学习，我爱学习！Hello world!veryveryveryveryverylongword isn't it?
第一个文本框的 word-break 属性设置为 normal，可以看到,浏览器默认换行是 CJK 换行，non-CJK 换行方式是在半角空格连字符的地方换行,长单词不换行； 第二个文本框的 word-break 属性设置为 break-all，可以看到 CJK 和 non-CJK 文本被随意拆分换行，不会出现文本框溢出，但是 non-CJK 文本也失去原有的样子； 第三个文本框的 word-break 属性设置为 keep-all，由于只能在半角空格或连字符处换行，所以过长的 non-CJK 文本产生了溢出现象，但是每个单词都能在一行内呈现，另外，设置为 keep-all 时，CJK 文本是不断行的，在第一个逗号的地方产生了换行，第二行的我爱实验楼楼楼楼楼中间没有半角空格或连字符，所以没有换行产生了溢出，直到感叹号的地方才产生换行。
重点是文本的溢出和换行控制，overflow-wrap 和 word-break 有些相似，但又有很大的区别。