文本阴影属性
- text-shadow
- 说明：水平、垂直阴影的位置允许负值
可进行多阴影设置(中间用逗号分隔)
text-shadow: 10px 10px 10px red;
/*第一个值是阴影水平方向的距离；（必须有的，支持负值，正值向右负值向左）
第二个值是垂直方向的距离；（必须有的，支持负值，正值向下负值向上）；
前两个值必须有且简写时位置不能互换!!!
第三个值是阴影的模糊程度；（不支持负值）
第四个值是阴影的颜色*/
下面我们看一下效果。先写一个p标签（为了方便看效果，我加了一个边框），里面写上文字。
<style type="text/css">
p{
width: 150px;
border: 1px solid #000;
text-shadow: 2px 2px 1px red;
}
</style>
<p>今天也要加油哦</p>
没有文本阴影属性值时候是这样的：
加上text-shadow: 2px 2px 1px red;之后是如下效果，文字的阴影是从文字原来的位置向右和向下分别移动了2px
加上text-shadow: -2px -2px 1px red;之后是如下效果，文字的阴影是从文字原来的位置向左和向上分别移动了2px
而改变模糊程度的值text-shadow: -2px -2px 5px red;之后是如下效果，文字的阴影是从文字原来的位置向左和向上分别移动了2px，比上面效果更模糊了。
文本阴影与盒子阴影可以设置多个阴影，中间用逗号隔开。例如text-shadow: 2px 2px 5px green,3px 3px 5px red;
盒子阴影
-
box-shadow 盒子阴影 h-shadow 水平阴影的位置。（必需的，允许负值，简写时位置不可替换）
-
v-shadow 垂直阴影的位置。（必需的，允许负值，简写时位置不可替换）
-
blur 模糊距离（可选）
-
spread 阴影的大小（可选，允许负值）
-
color 阴影的颜色（可选）
-
inset 从外层的阴影（开始时）改变阴影内侧阴影（可选）
例如我们写一个盒子，效果如下所示，阴影从原本的位置分别向右和向下移动10px,模糊程度是10px，阴影大小也为10px.
.box{
width: 300px;
height: 300px;
background: #f00;
box-shadow:10px 10px 10px 10px #000 ;
}
其中的模糊程度与阴影大小属性可以写也可以不写，如果写上了，则必须按照上述顺序。例如，box-shadow:10px 10px 0 10px #000 ;，它的模糊程度为0，如图所示：
但这个模糊程度的0不可省去，否则后面的阴影大小属性则会被当做模糊程度，即box-shadow:10px 10px 10px #000 ;如图所示：
当阴影改为内阴影时，方向是反的。比如，本来阴影前两个值是正值，变为内阴影时，阴影位置会发生对称变化。要想与之前位置一样，要变为负值。
box-shadow: 10px 10px 10px 10px #000 inset;
若还想阴影出现在右下角，要将前两个值改为负值：box-shadow: -10px -10px 10px 10px #000 inset;
文本换行
如果一串英文或数字之间没有空格，浏览器会认为这是一个单词，则到容器边缘时也不会换行，如图所示：
<style>
.content{
width: 200px;
height: 200px;
border: 1px solid #f00;
margin:50px auto;
}
</style>
<div class="content">今天很开心啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊hcjsdcbjcbsdbchsdbcjdbcjdbcdsjcjdcb</div>
-
word-wrap
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
属性值：
normal：只在允许的断字点换行（浏览器保持默认处理）
break-word：属性允许长单词或 URL 地址换行到下一行
如若加上了word-wrap: break-word;，则它会在新的一行来显示换行，如图所示：
-
word-break
属性值：
break-all：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
keep-all：文本不会换行，只能在半角空格或连字符处换行（默认）
如若加上了word-break: break-all;，则它会在上一行结束位置显示换行，如图所示：
@font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）
@font-face的语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][, []]*;
[font-weight: <weight>];
[font-style: <style>];
}
今天的分享就到这里啦，加油~
