Servenity

CSS3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在写慕课网的七夕主题，用了大量的CSS3动画，但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的，这里就写下关于帧动画steps属性的理解我们知道CSS3的Animation有八个属性animation-nameanimation-durationanimation-delayanimatio

名称：transition语法：transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]取值说明：[ transition-property ]：对象过渡的css属性[ transiti

名称：linear-gradient语法如下：-webkit-gradien(,[,]?,[,]?[,]*)  // webkit老式语法-webkit-linear-gradient([||,]?,[,]*)  // webkit语法-moz-linear-gradient([||,]?,[,]*)  // Gecko语法-o-linear

Media Queries属性在做响应式布局的时候功不可没，如果做过响应式，对下面的写法一定很熟悉：@media screen and (min-width: 320px) { … }其中包含了媒体的引入方式、逻辑操作符、媒体类型（Media Type）、媒体特性（Media Query）等，下面来详细的看下这些属性。媒体的引入方式：

关于换行、裁剪的一些CSS属性word-wrap: normal | break-wordnormal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况break-word 以单词作为换行依据，如果需要，单词内部允许断行word-break: normal | break-all | keep-all

CSS3的border范围内有border-radius、box-shadow，border-image三个属性，另外网上有些资料把border-color属性的多边框色也归到css3，不过经测试只有firefox支持，并且要加-moz-私有属性，然后去w3.org，去翻阅资料，没发现有介绍这个多边框色的属性，总结下来，应该是火狐的自家产物，并非W3C标准。接下来，这篇文章介绍css3之borde

background-size语法：background-size： [ , ]* = [ | | auto ]{1,2} | cover | contain取值：auto 背景图像的真实大小，默认值 用长度值指定背景图像大小 用百分比指定背景图像大小cover 将背景图像等比缩放到完全覆盖容器，背景

无论CSS那个版本，对于CSS制作圆角，想必大家都不会陌生，不过在CSS3到来之前，为了制作圆角是一件很麻烦的事情，记得曾经的一个方法是制作4个空标签并设置圆角背景，最后分别定位到相应的位置，还有一种不需要图片的方法是，用多个一像素的块级元素叠加，然后设置不同宽度或者高度形成圆角，这种方法相比第一种更加麻烦，但是没有图片。border-radius来了，小伙伴们惊呆了，各种犀利的圆角效果竟能如此简