CSS（十）--CSS3- 新特性背景透明、圆角边框、盒子阴影、过渡

CSS3：

1.背景透明：

语法：background: rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

2.圆角边框(CSS3)

语法：border-radius:length;

• 其中每一个值可以为 数值或百分比的形式。
• 技巧： 让一个正方形 变成圆圈 ：border-radius: 50%;
  圆角矩形设置4个角
  圆角矩形可以为4个角分别设置圆度， 但是是有顺序的：
• border-top-left-radius:20px;
• border-top-right-radius:20px;
• border-bottom-right-radius:20px;
• border-bottom-left-radius:20px;
  如果4个角，数值相同：border-radius: 15px;
  简写： border-radius: 左上角 右上角 右下角 左下角;

3.盒子阴影

语法：box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

例如：
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);

4.过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3

transition: all 0.5s;
谁做过渡给谁加