在最近的学习中，忽然发现了好久没有用到过的css3,其中一些效果和属性我感觉还是比较实用的，那么我就稍微总结一下最近用到过的属性吧！在整理的过程中我也参考了我爱考试网中的一些知识点，感觉还是比较实用的，有兴趣的博友们可以浏览的参考一下！
1、首先呢，是动画这个属性（css3的动画可以实现一些比较小的动态效果），在实际应用中还是比较有效和实用的的！
属性
描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
2、 多列属性 （利用css实现页面中段落的分列效果）
属性
描述
column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性
3、（css3）用户界面
属性 描述
appearance 允许您将元素设置为标准用户界面元素的外观
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。
icon 为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down 规定在使用 arrow-down 导航键时向何处导航。
nav-index 设置元素的 tab 键控制次序。
nav-left 规定在使用 arrow-left 导航键时向何处导航。
nav-right 规定在使用 arrow-right 导航键时向何处导航。
nav-up 规定在使用 arrow-up 导航键时向何处导航。
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
4、（css3 2D）转换（Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)等，利用Transform和javascript可以制作一些简单的动画，可以为web应用带来些意想不到的效果。）
属性 描述
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。。
2D Transform 方法
函数 描述
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 轴。
resize 规定是否可由用户对元素的尺寸进行调整。
过渡属性
属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
最后写一个关于阴影的小例子：(例子参考来源于我爱考试，注：我爱考试中也有许多关于css 的知识点题库，有兴趣的博友可以参考一下！)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>阴影</title> 6 <style> 7 .demo11 { 8 border: 1px dashed #f2b; 9 height: 150px; 10 width: 250px; 11 text-align: center; 12 line-height: 150px; 13 margin: 0 auto; 14 font-size: 50px; 15 color: orange; 16 text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); 17 } 18 19 </style> 20 </head> 21 <body> 22 <div class="demo11">我爱考试</div> 23 </body> 24 </html>
最近感觉字体阴影的效果还是比较好看的，所以自己写了一个小效果， 不是很好看，但最少体现出来这是一个阴影效果吧！
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
