一、css3边框
1、border-radius
border-top-right-radius:右上角的圆角边框
border-top-left-radius:左上角的圆角边框
border-bottom-left-radius:左下角的圆角边框
border-bottom-right-radius:右下角的圆角边框
2、border-image
border-image属性分开写：
border-image-source:用在边框的图片的路径
border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度
border-image-outset:边框图片区域超出边框的量
border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
3、box-shadow
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:必需值,水平阴影的位置,允许负值
v-shadow:必需值,垂直阴影的位置,允许负值
blur:可选,模糊距离
spread:可选,阴影的尺寸
color:可选,阴影的颜色
inset:可选,将外部阴影(outset)改为内部阴影
二、css3背景
1、background-size:
//css3之前背景图片的尺寸是由图片的实际尺寸决定的
//在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
2、background-origin:
//规定了图片的定位区域content-box、padding-box、border-box
3、background-clip:
//规定背景的绘制区域
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框
content-box:背景被裁剪到内容框
三、css3文本效果
1、text-shadow(向文本添加阴影)
h-shadow:必需值,水平阴影的位置,允许负值
v-shadow:必需值,垂直阴影的位置,允许负值
blur:可选,模糊距离
color:可选，阴影的颜色
2、word-wrap(允许对长的不可分割的单词进行分割并换行到下一行)
normal:只在允许的断点字换行
break-word:在长单词或URL地址内部进行换行
四、css3 2D转换
//通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
1.translate(x,y) 从当前为开始移动,移动到给定的top位置(x坐标)与left位置(y坐标)确定的位置
translateX(n)只沿x轴
translateY(n)只沿y轴
2.rotate(30deg) 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。(单位是deg)
//为了兼容浏览器,要加上内核
transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */
3. scale(a,b) 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）高度变化的倍数
a表示x轴宽度变化的倍数,b表示y轴高度变化的倍数
scaleX(a)只变化x轴 scaleY(b)只改变y轴
4.skew(20deg,20deg)
通过skew()方法 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
skewY()只绕x轴旋转 skewY()只绕y轴
5.matrix()
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素