CSS3边框与圆角
1.CSS3圆角border-radius
定义：可以为元素添加圆角边框（块元素，行内块元素，行内元素）
属性：
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius：
属性值
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
border-radius中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径。
圆形与椭圆：
一旦使用百分比，参照的是元素本身的高度与宽度当拿50%时，宽等于高为圆形 宽不等于高为椭圆形
2.盒阴影box-shadow
定义：可以控制一个或多个下拉阴影的框
语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
background-size
定义：指定背景图像的大小
语法：background-size：number / % / cover / contain
属性介绍：
number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现
3.CSS3渐变
定义：可以在两个或者多个指定颜色之间显示平移的过渡
线性渐变
定义：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变（从一边拉向另一边）
语法：background:linear-gradient(方向，开始颜色，结束颜色)
方向介绍：
1.方向从上到下（默认）
background: linear-gradient(red,blue);
2.方向从左到右
background: linear-gradient(to right,red,blue);
3.对角
background: linear-gradient(to right bottom,red,blue);
径向渐变
定义：从起点到终点，颜色从内向外进行圆形渐变
语法：background:radial-gradient(形状尺寸，开始颜色，结束颜色)
形状分类：
circle --- 圆形
ellipse --- 椭圆形
注意：当元素的高和宽一样时，参数无论设置哪个，都是圆形
尺寸大小：
closest-side最近边
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最远边
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最远角
background: radial-gradient(farthest-corner circle,red , blue);
