CSS3新特性

CSS3新特性（面试题）

CSS3的新特征有：1、圆角效果；2、图形化边界；3、块阴影与文字阴影；4、使用RGBA实现透明效果；5、渐变效果；6、使用“@Font-Face”实现定制字体；7、多背景图；8、文字或图像的变形处理；9、多栏布局；10、媒体查询等。

CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。**在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。**本文将重点介绍一些比较绚丽且实用 CSS3 新特性。

一：CSS3选择器

1.基本选择器（id选择器、类选择器等）

2.属性选择器（例如：a[href] {color:red;} //只对有 href 属性的a 元素应用样式）

3.伪类选择器 （例如：:hover “悬停”：鼠标放到标签上的时候）

二：CSS3边框与圆角

1.CSS3圆角border-radius

2.盒阴影box-shadow

三：CSS3背景与渐变

1.CSS3背景

background-image

2.CSS3渐变（Gradients）

两种类型的渐变：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

定义：可以在两个或者多个指定颜色之间显示平移的过渡

四：CSS3过渡（ transition）

定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。（有浏览器兼容问题！）

五：CSS3变换（transform）

定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。（有浏览器兼容问题！）

六：CSS3动画（ @keyframes）

定义：使元素从一种样式逐渐变化到另外一种样式的效果。（有浏览器兼容问题！）

！更多css3新特性请跳转至菜鸟教程