css3宽度变大动画_CSS3 — 新增属性(一)

一、边框圆角

border-radius属性，值可以是一个px为单位的数值，也可以是%为单位的百分比数值。

• 属性名：border-­radius
• 作用：设置边框的圆角。
• 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

单一属性

• border-top-left-radius: 半径;
• border-top-right-radius: 半径;
• border-bottom-right-radius: 半径;
• border-bottom-left-radius: 半径;

简写方法

• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写
法。
• border-radius: 左上角 右上角 右下角 左下角;
• border-radius: 左上角 右上角和左下角 右下角 ;
• border-radius: 左上角和右下角 右上角和左下角 ;
• border-radius: 四个角相同;

/ 的属性值写法

• border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/
后面可以设置垂直方向四种值的写法。

如果border-radius足够大，是宽度、高度的一半，就是正圆。

浏览器兼容

• Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

二、文字阴影

• 在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴
影、模糊距离，以及阴影的颜色：

文字阴影语法

text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行 规定，省略的长度是 0。

多层阴影

text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

三、盒子阴影

• 在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影。

边框阴影语法

box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0。

多层阴影

box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

四、过渡属性

动画效果

• CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画。
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

过渡属性

属性名：transition
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画
（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B
代指），那么A和B之间就可以实 现平滑的过渡的动画效果。为了方便看效果，我们
使用 :hover 切换状态。

语法格式：

单一属性写法

transition-property 过渡的属性

• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔

transition-duration 过渡花费时间

• 过渡时间：以s秒为单位。
• 延时时间：以s秒为单位。0s也必须加单位。

transition-timing-function 时间曲线

规定过渡效果的时间曲线，默认是 "ease"

贝塞尔曲线

transition-delay 过渡延时

规定过渡效果何时开始，默认是 0

使用注意：
1）如果想要所有的属性都变化过渡， 写一个all 就可以
2）transition-duration 花费时间单位是 秒 s 比如 0.5s 这个s单位必须写

什么属性能过渡

基本所有属性都 能过渡：background-color、background-position、background-image、border-radius、border、padding、font-size等等。 不能过渡的：渐变色、float
尤其要注意的是， jQuery中的animate函数，不支持background-color、background-position。 所以，如果想要制作背景颜色、背景定位的动画，必须使用CSS3。

什么时候触发过渡

任何对元素的CSS改变都能触发过渡。 不要认为只有:hover能够触发过渡。任何造成元素的改变，都会引发过渡。 比如元素的类名改变，能够触发过渡。 比如直接用JS来设置属性，也能够触发过渡。
transition就像护身符一样，任何人胆敢改我的css样式，一定是动画实现的。并且动画效率比setInterval还高。 用过渡来实现动画，早晚有一天要替代setInterval()原理。

浏览器兼容

• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-。
• 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

五、background系列

background系列非常的闹腾

5.1 渐变

再也不用切 1px 然后repeat-x做渐变了。现在可以用CSS3制作渐变，IE9开始兼容。

线型渐变，linear-gradient
background-image: -webkit-linear-gradient(top,red,blue);
首先先说一下，一定是background-image属性，而不是background-color。

linear-gradient表示线型渐变。三个参数，top表示从上到下，罗列颜色值。

私有前缀：浏览器厂商把一些还处于实验性质的css属性，都加上了自己的前缀。 chrome的是 -webkit- 火狐是 -moz- IE是 -ms- 欧朋是 -o-

所以一条属性要写很多个私有前缀的写法：
background-image: -webkit-linear-gradient(top,red,blue);
background-image: -moz-linear-gradient(top,red,blue);
background-image: -o-linear-gradient(top,red,blue);
background-image: -ms-linear-gradient(top,red,blue);
background-image: linear-gradient(top,red,blue);

第一个参数，可以写deg为单位的度数。deg就是英语degree的缩写，度数。一圈是360deg。 方向有分歧：

通常来说，写英语单词来描述渐变方向就行了，比如top、left、bottom、right。不要写deg。

可以罗列无数个颜色值，用逗号隔开  
background-image: -webkit-linear-gradient(top,red,orange,yellow,green,blue,purple);

可以用百分比描述这种颜色从何处开始：     
background-image: -webkit-linear-gradient(top,red,blue 30%,green 70%);

5.2 backgrond-origin 和 background-clip 属性

背景起源属性：

background-origin: content-box;

content-box指的内容盒子，就是从内容盒子开始渲染背景。

background-clip表示背景裁切，如果值是content-box就表示padding区域没有背景，只有content区域有背景。

background: url(images/0.jpg);
background-clip: content-box;
background-origin: content-box;

上面的语句等价于：
background: url(images/0.jpg) content-box;

5.3 background-size属性

现在可以更改背景图片的尺寸了！IE9开始兼容 先写宽度，然后是高度。

background-size: 200px 200px;

如果只想设置一个值，另外一个值自动按比例计算，那么就写auto：

background-size: 200px auto;

background-size: auto 200px;

backgrond-size可以用cover来当做值，表示图片不变形，尽可能多的呈递图片。根据图片的宽高比不同，和盒子的宽高比不同，有两种区别。cover可能不能完整呈递图片：

值也可以是contain，表示图片不会变形，一定能呈递完整图片：

background-size用于精灵的时候，比较复杂，background-size是精灵图整体的尺寸。

5.4 多背景

一个盒子可以同时携带多个背景了，用逗号隔开。IE9兼容。 但是，同一个盒子只能携带一个背景色，可以携带多个背景图。

background: url(images/0.png) repeat-y,
            url(images/shishi.jpg) no-repeat ,
            url(images/0.jpg);

按照顺序，前面没有占满的空间，就可以给后面的图片使用。

background-position、background-size等等属性都能用逗号隔开数值了，表示对不同的图片来设置值。

background-size: auto auto,
                 600px 100px,
                 auto auto;

六、浏览器兼容性策略

平稳退化：高级浏览器很炫酷，低级浏览器看不见炫酷的效果，页面结构稳定、骨架稳定、该显示的东西都有。CSS的兼容策略，基本都是平稳退化。

比如你现在用一个border-radius:15px; 那么IE6、7、8是没有圆角的，ok，你心想没有圆角就没有了吧，因为盒子稳定，只不过就是美观性差了点，这就是平稳退化的思路。平稳退化就是放低低端用户，低端用户在审美上上就有一些瑕疵。

渐进渐强：给低版本用户普通的功能，现代浏览器的用户能有更方便的功能。和平稳退化一样，都放弃了低端用户，但是也保障了低端用户的实用性。

比如，购买一个东西输入购买的数量

低版本浏览器会把这个东西当做text框，没有任何附加的功能。而高版本浏览器的number控件多了上下键的功能：

再比如百度的新闻页面：

但是我们不满足，我们希望高级浏览器会更好看，渐进渐强。

平稳退化和渐进渐强哲学上都是一致的：放弃低端用户，只给低端用户足够的使用性，但是美观、易用程度上有瑕疵。平稳退化先以高版本思考问题，低版本用户就不兼容就算了，因为已经足够能使用这个页面了；渐进渐强是对自己的严格要求，给高级浏览器用户更多的功能。

还有一个更经常使用的策略，就是破罐破摔，就是不让低版本浏览器用户看到这个页面，强行跳转：

IE6、7、8都不认识新标签，比如header、section。 有神人帮你写了一个js，叫做html5shiv，能够把所有新标签换成div来解析。