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属性动画时间过渡方式延时时长) - 延长固定时长之后，将元素的css属性以某种过渡的方式执行动画，在动画时间内；
-webkit-transition: width 2s, height 2s, transform 2s linear 2s;
// 表示同时过度宽度高度和 transform 过渡时间为2秒过度方式为匀速延时2秒开始过渡。
例：

.aa{width: 200px;height: 300px;display: flex;justify-content: center;align-items: center;border: 1px solid #ccc;border-radius: 8px;cursor: pointer;transition:transform 2s;//设置鼠标划上规定的时间-webkit-transition:-webkit-transform 1s;
}
.aa:hover{transform:scale(1.1,1.1);//整比例放大1.1倍-webkit-transform:scale(1.1,1.1);box-shadow:0px 0px 5px rgba(0,0,0,0.3);//设置阴影
}

十二、animation 和 keyframe 的用法，也就是我们常说的C3动画。

@keyframe
定义和用法
@keyframes是用来创建帧动画的，我们通过这个属性可以用纯css来实现一些动画效果。
一般格式是：
@keyframes 动画名称{
0%{
　　动画开始时的样式
}
100%{
　　动画结束时的样式
}
}
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间，浏览器可以自动补间，中间也可以设置多个百分比，实现更加多变的动画效果。
animation
定义和用法
animation属性是写在要实现动画的元素的选择器中的，实现元素的动画绑定。animation 属性是一个简写属性，用于设置六个动画属性：
animation-name ：规定需要绑定到选择器的 keyframe 名称。
animation-duration ：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function ：规定动画的速度曲线。默认ease 可填linear
animation-delay ：规定在动画开始之前的延迟。默认0秒
animation-iteration-count ：规定动画应该播放的次数。默认1
animation-direction ：规定是否应该轮流反向播放动画。 alternate反向播放默认normal
语法
animation: name duration timing-function delay iteration-count direction
例：

.aa{width: 200px;height: 300px;display: flex;justify-content: center;align-items: center;border: 1px solid #ccc;border-radius: 8px;cursor: pointer;position:relative;animation: myfirst 5s infinite alternate;/* Safari 与 Chrome: */-webkit-animation: myfirst 5s infinite alternate;
}
@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-moz-keyframes myfirst /* Firefox */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-o-keyframes myfirst /* Opera */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}