CSS3新增

CSS3 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。

border-radius 圆角属性

border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;
border-radius: top-left top-right bottom-right bottom-left

/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

复合与单例写法对比

border-radius:2em;
/*对应单例写法为*/
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;
/*对应单例写法为*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

1-4个值所对应

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

• 一个值： 四个圆角值相同

x 方向 % 对应容器宽度

y方向 % 对应容器高度

描述	值
定义弧线半径	length
使用%定义角落的形状。	%

border-image 边框图片

border-image: source slice width outset repeat|initial|inherit;
border-image: url(border.png) 30 round;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置 路径
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

border-shadow 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)
box-shadow: 10px 10px 20px 25px #ccc inset;

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0

值	参数	描述
h-shadow	必需的。水平阴影的位置。允许负值	阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边
v-shadow	必需的。垂直阴影的位置。允许负值	阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部
blur	可选。模糊距离	此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
spread	可选。阴影的大小	此参数可选，