1.前言
css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！
看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。
2.过渡
过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！
引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。
2-1语法
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码
栗子1
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/transition：width,.5s,ease,.2s复制代码
栗子2
/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/transition：all,.5s复制代码
上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）
transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;复制代码
2-2实例-hover效果
上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。
当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码transition: all .5s; 2-3实例-下拉菜单
上面两个菜单，第一个没有使用过渡，第二个使用过渡，大家明显看到区别，使用了过渡看起来也是比较舒服！代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}
可能大家不知道我在说什么！我贴下代码吧
html
复制代码
css
.demo-ul{margin-bottom: 300px;} .demo-ul li{ padding: 0 10px; width: 100px; background: #f90; position: relative; } .demo-ul li a{ display: block; height: 40px; line-height: 40px; text-align: center; } .demo-ul li ul{ position: absolute; width: 100%; top: 40px; left: 0; transform: scaleY(0); overflow: hidden; } .ul-transition ul{ transform-origin: 0 0; transition: all .5s; } .demo-ul li:hover ul{ transform: scaleY(1); } .demo-ul li ul li{ float: none; background: #0099ff;}复制代码 上面两个可以说是过渡很基础的用法，过渡用法灵活，功能也强大，结合js，可以很轻松实现各种效果（焦点图，手风琴）等，以及很多意想不到的效果。这个靠大家要去挖掘！
3.动画
动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！
3-1.语法
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码
栗子1
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/animation: logo2-line 2s linear;复制代码
栗子2
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/animation: logo2-line 2s linear 2s;复制代码
栗子3
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/animation: logo2-line 2s linear alternate infinite;复制代码
还有一个重要属性
animation-fill-mode : none | forwards | backwards | both;/*none：不改变默认行为。 forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both：向前和向后填充模式都被应用。 */ 复制代码
3-2.logo展示动画
这个是我用公司logo写的动画，没那么精细
代码如下
Title 
复制代码
下面让大家看一个专业级别的
代码如下
Title 复制代码stack overflow
3-3.loading效果
这个代码实在太多了，大家直接上网址看吧。
3-4.音乐震动条
代码如下
纯CSS3模拟跳动的音符效果 复制代码
4.形状转换
这一部分，分2d转换和3d转换。有什么好玩的，下面列举几个！
4-1.语法
transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)4-2.实例
transform:rotate(30deg);
transform:translate(30px,30px);
transform:scale(.8);
transform: skew(10deg,10deg);
transform:rotateX(180deg);
transform:rotateY(180deg);
transform:rotate3d(10,10,10,90deg);
5.选择器
css3提供的选择器可以让我们的开发，更加方便！这个大家都要了解。下面是css3提供的选择器。
图片来自w3c。这一块建议大家去w3c看（），那里的例子通俗易懂。我不重复讲了。
提供的选择器里面，基本都挺好用的。但是我觉得有些不会很常用，比如，:root，:empty，:target，:enabled，:checked。而且几个不推荐使用，网上的说法是性能较差[attribute*=value]，[attribute$=value]，[attribute^=value]，这个我没用过，不太清楚。 6.阴影
以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片实现，但是现在不需要，css3就提供了！
6-1.语法
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码
6-1.栗子
复制代码
运行效果
7.边框
7-1.边框图片
7-1-1.语法
border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
7-1-2.栗子
边框图片（来自菜鸟教程）
代码
复制代码
效果
有趣变化
那个更好看，大家看着办
7-2.边框圆角
7-2-1.语法
border-radius: n1,n2,n3,n4;border-radius: n1,n2,n3,n4/n1,n2,n3,n4;/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/复制代码
7-2-2.栗子
运行结果
8.背景
这一块主要讲css3提供背景的三个属性
background-clip
制定背景绘制（显示）区域
默认情况（从边框开始绘制）
从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！（background-clip: padding-box;）
只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！（background-clip: content-box;）
background-origin
引用菜鸟教程的说法：background-Origin属性指定background-position属性应该是相对位置
下面的div初始的html和css代码都是一样的。如下
htmlLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.复制代码
css
div{ border:10px dashed black; padding:35px; background:url('logo.png') no-repeat,#ccc; background-position:0px 0px;}复制代码 下面看下，background-origin不同的三种情况
background-size
这个相信很好理解，就是制定背景的大小
下面的div初始的html和css代码都是一样的。如下htmlLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.复制代码
css
div{ border:1px dashed black; padding:35px; background:url('test.jpg') no-repeat;}复制代码 多张背景图
这个没什么，就是在一张图片，使用多张背景图片，代码如下！
html两张图片的背景
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.复制代码
css
div{ border:1px dashed black; padding:35px; background-size: contain; background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;}复制代码 9.反射
这个也可以说是倒影，用起来也挺有趣的。
9-1.语法
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片复制代码
9-2.下倒影
html
下倒影
复制代码
css
.reflect-bottom-p { padding-bottom: 300px;} .reflect-bottom { -webkit-box-reflect: below;} 复制代码 9-2.右倒影（有偏移）
html
右倒影同时有偏移
复制代码
css
.reflect-right-translate { -webkit-box-reflect: right 10px;}复制代码 9-3.下倒影（渐变）
html
下倒影（渐变）
复制代码
css
reflect-bottom-mask { -webkit-box-reflect: below 0 linear-gradient(transparent, white);}复制代码 9-3.下倒影（图片遮罩）
使用的图片
html
下倒影（png图片）
复制代码
css
.reflect-bottom-img { -webkit-box-reflect: below 0 url(shou.png);}复制代码 10.文字
换行
语法：word-break: normal|break-all|keep-all;
语法：word-wrap: normal|break-word;
超出省略号这个，主要讲
text-overflow这个属性，我直接讲实例的原因是text-overflow的三个写法，clip|ellipsis|string。clip这个方式处理不美观，不优雅。string只在火狐兼容。
超出省略号
这个其实有三行代码，禁止换行，超出隐藏，超出省略号
htmlThis is some long text that will not fit in the box复制代码
css
div{ width:200px; border:1px solid #000000; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}复制代码 运行结果
多行超出省略号
超出省略号。这个对于大家来说，不难！但是以前如果是多行超出省略号，就只能用js模拟！现在css3提供了多行省略号的方法！遗憾就是这个暂时只支持webkit浏览器！
代码如下
效果图
这样发现边框贴着难看，要撑开一点，但是撑开上下边框不要使用padding!因为会出现下面这个效果。
正确姿势是这样写
复制代码
运行结果
这样写，就算在不是webkit内核的浏览器，也可以优雅降级（高度=行高*行数（webkit-line-clamp））！
文字阴影
语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
栗子：text-shadow: 0 0 10px #f00;效果 11.颜色
这个其实就是css3提供了新的颜色表示方法。
rgba
一个是rgba（rgb为颜色值，a为透明度）
color: rgba(255,00,00,1);background: rgba(00,00,00,.5);复制代码
hsla
h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”
这个我姿势了解过，没用过，这里简单给一个例子color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码
12.渐变
css3的渐变可以说是一大亮点，提供了线性渐变，径向渐变，圆锥渐变（w3c和菜鸟教程都没有提及，是我从一篇文章了解到，但是我自己在谷歌浏览器尝试，却是一个无效的写法！大家如果知道怎么用，请告知！感谢）
渐变这一部分，由于用法灵活，功能也强大，这个写起来很长，写一点又感觉没什么意思，我这里贴几个链接教程给大家，在文章我不多说了，毕竟我也是从那几个地方学的，他们写得也是比我好，比我详细！ （这篇就是看我看到圆锥渐变的文章）13.Filter（滤镜）
css3的滤镜也是一个亮点，功能强大，写法也灵活。
栗子代码如下
原图
黑白色filter: grayscale(100%)
褐色filter:sepia(1)
饱和度saturate(2)
色相旋转hue-rotate(90deg)
反色filter:invert(1)
透明度opacity(.5)
亮度brightness(.5)
对比度contrast(2)
模糊blur(3px)
阴影drop-shadow(5px 5px 5px #000)
14.弹性布局
这里说的弹性布局，就是flex；这一块要讲的话，必须要全部讲完，不讲完没什么意思，反而会把大家搞蒙！讲完也是很长，所以，这里我也只贴教程网址。博客讲的很好，很详细！
15.栅格布局
栅格化布局，就是grid；这一块和flex一样，要讲就必须讲完。这块的内容和flex差不多，也有点长，这里我也贴链接，这个链接讲得也很详细！
16.多列布局
这一块，我也是了解过，我觉得多列应该还是挺有用的。虽然我没在项目中用过，下面我简单说下！举个例子！这个属性，建议加私有前缀，兼容性有待提高！
html当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。复制代码
css
.newspaper{ column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; column-rule:2px solid #000; -webkit-column-rule:2px solid #000; -mox-column-rule:2px solid #000;} 复制代码 17.盒模型定义
box-sizing这个属性，网上说法是：属性允许您以特定的方式定义匹配某个区域的特定元素。
这个大家看着可能不知道在说什么，简单粗暴的理解就是：box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！如下图
box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图
18.媒体查询
媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！不过由于我最近的项目都是使用rem布局。所以媒体查询就没怎么用了！但是，媒体查询，还是很值得一看的！说不定哪一天就需要用上了！
栗子代码如下
重置浏览器窗口查看效果！
如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。
如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。
复制代码
运行效果
19.混合模式
混合模式，就像photoshop里面的混合模式！这一块，我了解过，在项目上没用过，但是我觉得这个应该不会没有用武之地！
css3的混合模式，两个（background-blend-mode和mix-blend-mode）。这两个写法和显示效果都非常像！区别就在于background-blend-mode是用于同一个元素的背景图片和背景颜色的。mix-blend-mode用于一个元素的背景图片或者颜色和子元素的。看以下代码，区别就出来了！这一块图片很多，大家看图片快速扫一眼，看下什么效果就好！
background-blend-mode
代码
原图
multiply正片叠底
screen滤色
overlay叠加
darken变暗
lighten变亮
color-dodge颜色减淡模式
color-burn颜色加深
hard-light强光
soft-light柔光
difference差值
exclusion排除
hue色相
saturation饱和度
color颜色
luminosity亮度
复制代码
运行效果
mix-blend-mode
代码
原图
multiply正片叠底
screen滤色
overlay叠加
darken变暗
lighten变亮
color-dodge颜色减淡模式
color-burn颜色加深
hard-light强光
soft-light柔光
difference差值
exclusion排除
hue色相
saturation饱和度
color颜色
luminosity亮度
复制代码
运行效果