css3样式总结--例如：颜色渐变、元素阴影、文字超长、transform、animation 和 keyframe动画的运用。

一、英文字母全部大写 英文字母全部小写 英文首字母大写

text-transform: uppercase ； text-transform:lowercase； text-transform:capitalize

二、border边框属性（简写）

border-width 边框宽度
border-style 边框样式（dotted虚线 solid实线 double双线 dashed虚线）
可以设置单条线，比如border-top-style:dotted;
Border-color 边框颜色

三、文本对齐

text-align：justify; 拉伸每一行，每一行具有相等的宽度
text-decoration:none; 取消a标签的下划线
text-decoration: overline; 文本上划线
text-decoration: line-through; 文本中划线
text-decoration: underline; 文本下划线

四、强制文本换行

word-wrap:break-word; 长文本换行
word-break: keep-all; 单词拆分换行、提前一个单词换行
word-break: break-all;单词拆分换行、强行拆分单词换行

五、文字缩进和文字阴影

text-indent:50px; 文本第一行的缩进
letter-spacing:3px; 文本中字符之间的间距
text-shadow 四个参数 水平阴影2px 垂直阴影2px 模糊度5px 颜色

六、列表样式（无序列表ul、有序列表ol）设置ul或者ol的css样式即可

list-style-type:circle; 空心圆
list-style-type:square; 方块
list-style-type:upper-roman; I、II、III 类型
list-style-type:lower-alpha; a、b、c 类型
list-style-image:url (); 背景图类型
list-style-type:none; 无样式

七、线性渐变

background-image:linear-gradient（#000,#fff） 从上到下线性渐变
background-image:linear-gradient（to right,red,yellow） 从左到右线性渐变
background-image:linear-gradient（to bottom right,red,yellow） 从左上角到右下角的渐变
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%)
repeating-linear-gradient()函数用于重复线性渐变
45deg类似于圆形的45°也就是从左下角到右上角 0°代表上到下 逆时针找位置
/*
百分比是指**某个颜色值距离起点的开始位置 **。默认的渐变方式为从上往下，所以当某个颜色值设置了百分比后，便会从距离顶端相关的距离（百分比计算）开始填充实色。而渐变色会在顶部与尾部的中间填充。
*/

八、径向渐变

background-image:radial-gradient（red,yellow,blue） 颜色节点均匀分布的径向渐变
background-image:radial-gradient（red 5%,yellow 15%,blue 60%） 颜色不均匀分布的径向渐变
设置形状：shape参数定义了形状，他可以是值circle或ellipse。其中circle表示圆形，ellipse表示椭圆形。默认值是ellipse。
background-image:radial-gradient（circle,red,yellow,blue） 形状为原型的径向渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%) 重复的径向渐变

九、盒子阴影box-shadow

box-shadow: none ;
box-shadow: inset x-offset y-offset blur-radius spread-radius color;
阴影类型：此参数可选，默认的投影方式是 外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影
X-offset：是指 阴影水平偏移量 ,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
Y-offset：是指 阴影的垂直偏移量 ，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部
阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
阴影颜色：此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省 略此参数
**注：**多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
box-shadow:（左右偏移量，上下偏移量，模糊半径，阴影扩展半径，阴影颜色）

十、文字超过容器长度用…代替

text-overflow:ellipsis;

十一、transform 属性向元素应用 2D 或 3D 转换。

• transform 属性是css3新属性，许多浏览器都要加兼容性前缀： Firefox：-moz- Opera ：-o-
  Safari 和 Chrome：-webkit-
  属性允许该我们对元素进行移动(translate)、旋转(rotate)、缩放(scale)或倾斜(skew)
  1.translate(x轴位移，y轴位移) - 元素沿X轴、Y轴进行平移; 正值-右下方移动，负值-左上方移动。也可以直接设置translateX或者translateY，参数只有一个。
  -webkit-transform:translate(80px, 80px)
  2.rotate(旋转角度) -元素已图形中心点为旋转中心，正值-顺时针旋转，负值-逆时针旋转
  -webkit-transform:rotate(15deg);
  3.scale(X轴缩放倍数，Y轴缩放倍数) - 基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数；0~1: 缩小；> 1：放大；也可以直接设置scaleX或者scaleY，参数只有一个。
  -webkit-transform:scale(1.2,1.6);
  4.skew(X轴扭曲角度，Y轴扭曲角度) - 沿着X轴和Y轴进行2D倾斜。也可以直接设置skewX或者skewY，参数只有一个。
  -webkit-transform: skew(30deg, 10deg)
  5.transition(css