CSS3有哪些特性

CSS3的特性：1、圆角（border-radius）；2、盒阴影（box-shadow）；3、文字阴影（text-shadow）；4、媒体查询（media queries）；5、渐变（gradients）；6、动画（animations）；7、过渡（transitions）。圆角（border-radius）属性可以用来为元素的四个角分别设置圆角，也可以设置所有角的圆角。

一、CSS3的特性

1、圆角（border-radius）

在CSS3中，可以用border-radius属性来设置元素的圆角效果。这个属性可以用来为元素的四个角分别设置圆角，也可以设置所有角的圆角。通过这个属性，我们可以方便地实现圆角按钮、圆角图片等效果。

2、盒阴影（box-shadow）

CSS3中的box-shadow属性可以为元素设置盒阴影效果。这个属性有多个参数，可以控制阴影的颜色、大小、偏移量等。通过这个属性，我们可以实现更加生动的元素效果，如按钮被按下时出现阴影效果。

3、文字阴影（text-shadow）

类似于盒阴影，CSS3中的text-shadow属性可以为文本设置阴影效果。这个属性也有多个参数，可以设置阴影的颜色、大小、偏移量等。通过这个属性，我们可以为文本添加更加炫酷的效果，如立体文字效果等。

4、媒体查询（media queries）

CSS3中的媒体查询功能可以根据不同的设备或浏览器宽度来为不同的屏幕设置不同的CSS样式。通过这个功能，我们可以为手机、平板和电脑三种不同的设备设计不同的页面布局和样式。

5、渐变（gradients）

CSS3中的渐变功能可以为文本和盒子设置渐变颜色效果。这个属性有两种类型，即线性渐变和径向渐变。通过这个属性，我们可以实现流畅的颜色渐变效果，如渐变按钮等。

6、动画（animations）

CSS3中的动画功能可以为元素添加动态效果，如渐变颜色、旋转、移动等。这个属性需要使用@keyframes关键字来定义动画的过程和终止状态。通过这个属性，我们可以为网页添加更加活泼和生动的元素效果。

7、过渡（transitions）

类似于动画，CSS3中的过渡功能可以为元素添加平滑的过渡效果，如从无到有、颜色变化等。这个属性需要设置过渡的属性、过渡时间以及过渡的缓动函数。通过这个属性，我们可以给元素添加更加自然的过渡效果。

二、CSS3选择器

1、属性选择器

• E[attr]：只使用属性名，但没有确定任何属性值；
• E[attr=”value”]：指定属性名，并指定了该属性的属性值；
• E[attr~=”value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
• E[attr^=”value”]：指定了属性名，并且有属性值，属性值是以value开头的；
• E[attr$=”value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
• E[attr*=”value”]：指定了属性名，并且有属性值，而且属值中包含了value；
• E[attr|=”value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

2、伪类选择器

• 结构性伪类选择器
  • X:first-child 匹配子集的名列前茅个元素。IE7就可以支持
  • X:last-child匹配父元素中最后一个X元素
  • X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
  • X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
  • X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
  • X:only-of-type匹配属于同类型中少数兄弟元素的X
  • X:first-of-type匹配同级兄弟元素中的名列前茅个X元素
  • X:nth-last-child(n)从最后一个开始算索引。
  • X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
  • X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
  • X:empty匹配没有任何子元素（包括包含文本）的元素X
• 目标伪类选择器
  • E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
• UI 元素状态伪类选择器
  • E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
  • E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
  • E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
  • E:selection 匹配E元素中被用户选中或处于高亮状态的部分
• 语言伪类选择器
  • lang eg：E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。
• 否定伪类选择器
  • E:not(s) （IE6-8浏览器不支持:not()选择器。）匹配所有不匹配简单选择符s的元素E
• 动态伪类选择器
  • E:link：链接伪类选择器，选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接描点上。
  • E:visited：链接伪类选择器，选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过，常用于链接描点上。
  • E:active：用户行为选择器，选择匹配的E元素，且匹配元素被激活，常用于链接描点和按钮上。
  • E:hover：用户行为选择器，选择匹配的E元素，且用户鼠标停留在元素E上，IE6及以下浏览器仅支持a:hover。
  • E:focus：用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点。
• 层级选择器
  • E>F：子选择器，选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素。
  • E F：相邻兄弟选择器，选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面。
  • E~F：通用选择器，选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素。

延伸阅读1：CSS3

CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。