个人总结

1.前言

css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！

看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。

2.过渡

过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！

引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。

2-1语法

栗子1

栗子2

上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）

2-2实例-hover效果

上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。

当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码

2-3实例-下拉菜单

上面两个菜单，第一个没有使用过渡，第二个使用过渡，大家明显看到区别，使用了过渡看起来也是比较舒服！代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡

可能大家不知道我在说什么！我贴下代码吧

html

css

上面两个可以说是过渡很基础的用法，过渡用法灵活，功能也强大，结合js，可以很轻松实现各种效果（焦点图，手风琴）等，以及很多意想不到的效果。这个靠大家要去挖掘！

3.动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！

3-1.语法

栗子1

栗子2

栗子3

还有一个重要属性

3-2.logo展示动画

这个是我用公司logo写的动画，没那么精细

代码如下

下面让大家看一个专业级别的

代码如下

3-3.loading效果

这个代码实在太多了，大家直接上网址看吧。css3-loading

3-4.音乐震动条

代码如下

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看（CSS 选择器参考手册），那里的例子通俗易懂。我不重复讲了。

提供的选择器里面，基本都挺好用的。但是我觉得有些不会很常用，比如，。而且几个不推荐使用，网上的说法是性能较差，这个我没用过，不太清楚。

6.阴影

以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片实现，但是现在不需要，css3就提供了！

6-1.语法

6-2.栗子

运行效果

7.边框7-1.边框图片7-1-1.语法

border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

7-1-2.栗子

边框图片（来自菜鸟教程）

代码

效果

有趣变化

那个更好看，大家看着办

7-2.边框圆角7-2-1.语法

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代码都是一样的。如下

html

css

下面看下，background-origin不同的三种情况

background-size

这个相信很好理解，就是制定背景的大小

下面的div初始的html和css代码都是一样的。如下

html

css

多张背景图

这个没什么，就是在一张图片，使用多张背景图片，代码如下！

html

css

9.反射

这个也可以说是倒影，用起来也挺有趣的。

9-1.语法

9-2.下倒影

html

css

9-2.右倒影（有偏移）

html

css

9-3.下倒影（渐变）

html

css

9-3.下倒影（图片遮罩）

html

css

10.文字换行

语法：

栗子和运行效果

语法：

栗子和运行效果

超出省略号这个，主要讲这个属性，我直接讲实例的原因是的三个写法，。这个方式处理不美观，不优雅。只在火狐兼容。

超出省略号

这个其实有三行代码，禁止换行，超出隐藏，超出省略号

html

css

运行结果

多行超出省略号

超出省略号。这个对于大家来说，不难！但是以前如果是多行超出省略号，就只能用js模拟！现在css3提供了多行省略号的方法！遗憾就是这个暂时只支持webkit浏览器！

代码如下

效果图

这样发现边框贴着难看，要撑开一点，但是撑开上下边框不要使用padding!因为会出现下面这个效果。

正确姿势是这样写

运行结果

这样写，就算在不是webkit内核的浏览器，也可以优雅降级（高度=行高*行数（webkit-line-clamp））！

文字阴影

语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

栗子：

效果

11.颜色

这个其实就是css3提供了新的颜色表示方法。

rgba

一个是rgba（rgb为颜色值，a为透明度）

hsla

h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”

这个我姿势了解过，没用过，这里简单给一个例子

12.渐变

css3的渐变可以说是一大亮点，提供了线性渐变，径向渐变，圆锥渐变（w3c和菜鸟教程都没有提及，是我从一篇文章了解到，但是我自己在谷歌浏览器尝试，却是一个无效的写法！大家如果知道怎么用，请告知！感谢）

渐变这一部分，由于用法灵活，功能也强大，这个写起来很长，写一点又感觉没什么意思，我这里贴几个链接教程给大家，在文章我不多说了，毕竟我也是从那几个地方学的，他们写得也是比我好，比我详细！

CSS3 Gradient

再说CSS3渐变——线性渐变

再说CSS3渐变——径向渐变

神奇的 conic-gradient 圆锥渐变（这篇就是看我看到圆锥渐变的文章）

13.Filter（滤镜）

css3的滤镜也是一个亮点，功能强大，写法也灵活。

栗子代码如下

14.弹性布局

这里说的弹性布局，就是flex；这一块要讲的话，必须要全部讲完，不讲完没什么意思，反而会把大家搞蒙！讲完也是很长，所以，这里我也只贴教程网址。博客讲的很好，很详细！

Flex 布局教程：语法篇

Flex 布局教程：实例篇

15.栅格布局

栅格化布局，就是grid；这一块和flex一样，要讲就必须讲完。这块的内容和flex差不多，也有点长，这里我也贴链接，这个链接讲得也很详细！

Grid布局指南

16.多列布局

这一块，我也是了解过，我觉得多列应该还是挺有用的。虽然我没在项目中用过，下面我简单说下！举个例子！这个属性，建议加私有前缀，兼容性有待提高！

html

css

17.盒模型定义

box-sizing这个属性，网上说法是：属性允许您以特定的方式定义匹配某个区域的特定元素。

这个大家看着可能不知道在说什么，简单粗暴的理解就是：box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！如下图

box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图

18.媒体查询

媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！不过由于我最近的项目都是使用rem布局。所以媒体查询就没怎么用了！但是，媒体查询，还是很值得一看的！说不定哪一天就需要用上了！

栗子代码如下

运行效果

19.混合模式

混合模式，就像photoshop里面的混合模式！这一块，我了解过，在项目上没用过，但是我觉得这个应该不会没有用武之地！

css3的混合模式，两个（background-blend-mode和mix-blend-mode）。这两个写法和显示效果都非常像！区别就在于background-blend-mode是用于同一个元素的背景图片和背景颜色的。mix-blend-mode用于一个元素的背景图片或者颜色和子元素的。看以下代码，区别就出来了！

这一块图片很多，大家看图片快速扫一眼，看下什么效果就好！

background-blend-mode

代码

运行效果

mix-blend-mode

代码

运行效果

20.小结

好了，个人总结的css3的新特性，就到这里了！其中有一些新特性如果想使用的好，必须多去了解和练习。有些新特性，如果要单独详细的讲，比如动画，过渡，弹性盒子，渐变等。估计可以写几篇或者十几篇文章！特别是动画，估计写一本书都可以！上面对css3新特性的讲解和案例，都是基础的认识和用法，希望能起到一个拓展思维的作用。最重要的是，大家要多加练习，实操是最重要的一环，孰能生巧也是这样来的！css3不仅要会用，也要用好，用好css3，在项目的开发上，很有帮助的！当然如果我有发现什么好玩的，有用的，我会继续写文章。

最后，如果大家觉得我哪里写错了，写得不好，或者有什么推荐的！欢迎指点！