本文主要是介绍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;
谁做过渡给谁加
这篇关于CSS（十）--CSS3- 新特性背景透明、圆角边框、盒子阴影、过渡的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
