CSS3 新特性

CSS3 边框

创建圆角边框

border-radius 是4个角的缩写方法。四个角的表示顺序是按照border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的顺序来设置。如果 / 前后的值都存在，那么 / 前面的值设置其水平半径，/ 后面值设置其垂直半径，如果没有 / ，则水平和垂直半径相等。 border-radius 指定不同数量的值遵循对角相等的原则，即指定了值的取指定值，没有指定值的与对角值相等。

边框阴影

box-shadow: 投影方式 X轴偏移量 Y轴偏移量模糊半径阴影扩展半径阴影颜色

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值inset ，其投影为内阴影；阴影水平偏移量：其值可以是正负值。如果为正值，则阴影在对象的右边，为负值时，阴影在对象的左边（内阴影时相反）；阴影垂直偏移量：其值可以是正负值。如果为正值，阴影在对象的底部，为负值时，阴影在对象的顶部（内阴影时相反）；阴影模糊半径：此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；阴影颜色：此参数可选，设定阴影颜色。

图片边框

图片边框简单的说就是把图片的中间部分去掉，从而形成一个边框。 border-image : border-image-source border-image-slice / border-image-width border-image-repeat border-image-source属性：用来指定边框所需素材的路径，如果只设置了border-image-source属性而未设置其他属性，则边框素材不会被划分九宫格，而是将整个素材按照边框宽度缩放至合适尺寸后安放在边框四角。 border-image-slice属性：用来设置边框素材的切割尺寸，四个值依次是上横切割线，右竖切割线，下横切割线，左竖切割线。数值分别代表从上、右、下、左边缘向素材中心延伸的像素/百分比数。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。注意：切割的数值只接受像素和百分比两个单位，并且像素单位必须省略，即只接收数值或者百分比的形式。例如，border-image-slice: 10 10 30 10：

如果想要把中间部分填满，就必须使用fill关键词。 border-image-repeat属性：用来设置上下左右四边(即2、4、5、7四个素材块)的重复形式，分别有stretch repeat round space四个取值

stretch:指定用拉伸方式来填充边框背景图。
repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

border-image-width属性：用来设置边框素材的宽度,当同时设置了border-image-width和border-width属性时，那么边框的实际宽度由border-width属性决定。此时，如果border-image-width属性小于border-width属性，边框图片会沿边框的外侧分布而内侧留空；如果border-image-width属性大于border-width属性，边框图片会仍会沿边框的外侧分布而内侧溢出。 border-image-outset属性：会产生使 border-image 相对于原始位置向外侧推移的效果。

CSS3 背景

background-origin属性

background-position 属性用来设置背景图像的起始位置，其默认值为top left，即元素的左上角。而这个“左上角”是相对于元素的什么位置（border、padding、content）来定位的，是由属性background-origin决定的，其默认值为padding-box。即默认情况下，背景图像从元素padding的左上角开始渲染。

padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

background-clip属性

background-clip用来规定背景（包含背景图像和背景色）的绘制区域。它定义了对背景进行裁剪的基准位置，在基准位置外的背景将直接被裁剪掉。其默认值为border-box。

padding-box 背景被裁剪到内边距框。
border-box 背景被裁剪到边框盒。
content-box 背景被裁剪到内容框。

CSS3 2D转换

默认情况下以左上角为坐标原点，x轴向右为正，y轴向下为正可用transform-origin设置原点位置

translate() 方法

通过 translate(x , y) 方法，元素根据给定的 left（x 坐标）和 top（y 坐标）位置参数从其当前位置移动，x为正值向右移动，为负值向左移动；y为正值向下移动，为负值向上移动；

rotate() 方法

控制元素顺时针旋转给定的角度。为正值，元素将顺时针旋转。为负值，元素将逆时针旋转。

scale() 方法

根据给定的宽度（X 轴）和高度（Y 轴）参数，控制元素的尺寸的增加、减少。

skew() 方法

根据给定的水平线（X 轴）和垂直线（Y 轴）参数设置元素翻转给定的角度。

2D转换方法汇总

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素。 matrix(a,b,c,d,e,f)一共六个参数，可以用矩阵表示为：示例：对其进行transform:matrix(0.9, -0.05, -0.375, 1.375, 220, 20)的变换最终结果： transform:matrix(a,b,c,d,e,tf)这六个参数其实就是每个变换对应的矩阵参数相乘的结果得到这6个参数值例如：transform: rotate(15deg) translateX(230px) scaleX(1.5); 在这里，一定要按照rotate，translateX，scaleX对应的顺序进行矩阵相乘矩阵的乘法不满足交换律，交换位置后效果不同

CSS3 3D转换

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

rotateY() 方法

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

CSS3 transition

transition-property

transition-property 用于指定应用过渡的属性名称，可以指定多个属性名称，默认值为 all ，也就是所有的元素都应用过渡效果。当只设置了 transition-property 属性而没有设置过渡持续时间的时候，过渡效果不会生效。

transition-duration

transition-duration 用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0。同样可以指定多个时长，多个每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。

transition-delay

transition-delay 规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。可以指定多个延迟时间，每个延迟将会分别作用于所指定的相符合的transition-property。

transition-timing-function

transition-timing-function用于指定过渡类型，可选值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
ease 默认值，先加速后减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速，效果比 ease 更明显
cubic-bezier() 贝塞尔曲线自定义