论CSS3中的各种样式的花式应用

一、border-radius 的设置顺序是一个顺时针方向 1.左上角 右上角 右下角 左下角四个值
2.左上角、右上角和左下角 、右下角 三个值  3. 两个值是 左上角和右下角 右上角和左下角
4.一个值时，四个值相同
二、border-image:路径(url) 裁剪位置(border-image-slice) 重复性(border-image-repeat)
裁剪位置 是上右下左顺序 一个九宫格的切割方式 
重复方式 平铺(round)会改变图片的大小 重复(repeat)不会改变图片的大小 拉伸(streth)如字面意思
border-image-outset边框图像区域超出边框的量,如边框被拉大一样，只是内容大小不变
border-image-width改变图片边框的大小
三、background-image可设置多个属性,使用逗号分隔
语法格式为：路径 位置 重复方式
background-size规定图片的尺寸 长度  百分比 cover(按比例缩放到最大尺寸填满整个区域) contain(把图像扩展到最大尺寸，使其高度和宽度完全适应内容区域)
background-origin:1.padding-box以内边距定位i 2.border-box以边框定位 3.content-box以内容进行定位
四、box-shadow 盒子的阴影效果 
h-shadow必需 水平阴影的位置，允许负值  v-shadow必需 垂直阴影的位置，允许负值
blur模糊距离，相对于原始图形，可选 spread可选阴影尺寸 相对于阴影 color阴影颜色 
inset(outset)内外部阴影 可选
五、线性渐变效果 background:linear-gradient(位置，起始颜色，结束颜色)
默认效果使从上到下 在位置前加to 就是相反方向
也可跟角度
径向渐变效果 radial-gradient() 从中心区域开始颜色渐变 
每一种颜色后可跟百分比 ，初始位置可定义初始的渐变形状 默认是ellipse，表示椭圆形 circl表示圆形
circle,red 20%,green 10%
六、word-wrap自动换行
normal默认  break-word允许自动换行
七、text-overflow:ellipsis  overflow:hidden white-space:nowrap配合使用达到多余部分省略号显示
八、2D转换方法
    移动：translate(x,y)以x轴和y轴进行移动
    旋转：rotate()默认deg  
    缩放：scale(x,y)x是宽度缩放 y是对高度进行缩放
    倾斜：skew(x,y)以x轴和y轴进行倾斜
    矩阵：matrix()