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-word normal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况 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来了，小伙伴们惊呆了，各种犀利的圆角效果竟能如此简