1、新增盒子属性
1.1 resize调整盒子大小：
resize属性可以控制是否允许用户调节元素大小
none ： 不允许调整元素大小
both ： 用户可以调节元素的宽高
horizontal ： 用户可以调节元素宽度
vertical ：用户可以调节元素高度
1.2 box-shadow盒子阴影
使用box-shadow属性为盒子添加阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
值
h-shadow ： 水平阴影的位置，必须填写，可以为负值
v-shadow ：垂直阴影的位置，必须填写，可以为负值
blur ： 模糊距离，可选
spread ： 阴影的额外延值，可选
color ： 阴影的颜色，可选
inset ： 将外部阴影改为内部，可选
1.3 边框轮廓
outline-width ： 外轮廓宽度
outline-color ： 外轮廓颜色
outline-style ： 外轮廓风格
none ： 无轮廓
dotted ： 点状轮廓
solid ：实线轮廓
double ：双实线轮廓
outline-offest： 设置外轮廓与边框的距离，正负值都可设置
outline复合属性：
outline:50px solid blue；
2、新增文本属性
2.1 文本换行
可以使用white-space属性设置文本换行方式
常用值如下：
normal ：文本超出边界后自动换行，文本中的换行被浏览器识别为一个空格
pre ：原样输出，pre标签的效果相同
pre-wrap ：在pre效果的基础上，超出元素边界自动换行
pre-line ：在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格被忽略
nowarp ：强制不换行
2.2 文本溢出
使用text-overflow属性设置文本溢出时呈现的模式
常用值如下：
clip： 当内联内容溢出时，将溢出的部分裁切掉（默认值）
ellipsis： 当内联内容溢出时，将溢出部分替换成...
注意：要使得text-overflow属性生效，块容器必须显示定义display为非visible值，white-space为nowarp值
2.3 文本修饰
text-decoration属性
text-decoration-line设置文本装饰线的位置
none：指定文字无装饰
underline ：指定文字装饰下划线
overline ：指定文字装饰上划线
line-through ：指定文字的装饰是贯穿线
text-decoration-style 文本装饰线条形状
solid ：实线
double ：双实线
dotted ：点状线条
dashed ：虚线
wavy ：波浪线
text-decoration-color 文本装饰线条颜色
2 .4 文本描边
文本描边仅webkit内核浏览器能支持
-webkit-text-stroke-width：设置文本描边的宽度，写长度值
-webkit-text-stroke-color ：设置文本描边的颜色，写颜色值
-webkit-text-stroke ：复合属性，设置文字描边的宽度和颜色值
3、新增渐变色
3.1 线性渐变色
background-image：linear-gradient（red,yellow,green）： 默认从上到下
background-image: linear-gradient（to top,red,yellow,green）：通过关键词设置渐变方向top left tight...
background-image: linear-gradient（30deg,red,yellow,green）：通过角度修改渐变方向
background-image: linear-gradient（red 50px,yellow 50px,green 50px ：设置渐变色宽度
背景呈现在文字上 -webkit-background-clip：text
例子：
.box{
background-image: linear-gradient（red,yellow,green）
font-size:80px;
text-align:center;
line-height:200px;
font-weight:bold;
color:transparent;
-webkit-background-clip:text;
3.2 径向渐变
多个颜色之间的渐变，默认从圆心四散，（不一定为正圆，要看容器本身宽高比）
background-image:radial-gradient(red,yellow,green)
使用关键词调整渐变圆心位置
background-image:radial-gradient(at right top,red,yellow,green) (圆心右上)
使用像素值调整渐变圆心的位置,坐标位置
background-image:radial-gradient(at 150px 50px, red,yellow,green)
调整渐变形状为正圆
background-image:radial-gradient(cricle,red,yellow,green)
调整形状的半径
background-image:radial-gradient(100px,red,yellow,green)
background-image:radial-gradient(50px 100px,red,yellow,green)
调整渐变位置
background-image:radial-gradient(red 50px,yellow 100px,green 150px)
