CSS3新特性的概述

CSS3新特性大致分为一下六类

• CSS3选择器
• CSS3边框与圆角
• CSS3背景与渐变
• CSS3过渡
• CSS3变换
• CSS3动画

下面说一下以上六类都有哪些内容

CSS3选择器

1、基本选择器

基本选择器又分为

子选择器

相邻兄弟选择器

通用兄弟选择器

群组选择器

2、属性选择器

1、element[attribute]

带有attribute属性的元素设置样式

2、element[attrbute=’value’]

带有attribute=’value’的元素设置样式

3、element[attribute~=’value’]

带有attribute属性值中，包含单词value的元素设置样式

4、element [ attribute = ‘value’]*

带有attribute属性值中，包含value的元素设置样式

5、element[attribute^=’value’]

带有attribute属性值中，以value开头的元素设置样式

6、element[attribute$=’value’]

带有 attribute 属性值中，以 value 结尾的元素设置样式

注意比较3和4的区别

3、伪类选择器

• 动态伪类

定义：这些伪类一般不出现HTML中，只有当用户和网站交互的时候才能体现出来

1、锚点伪类

: link

: visited

2、用户行为伪类

: hover

: active

: focus

3、目标伪类

: target

当我们点击锚点链接的时候，对应的id元素会显示在视口

4、checked状态伪类

这里我们只要知道 checkbox 只能设置宽高，不能设置背景和边框，如果想要设置那我们需要用 appearance:none; 来清除 input 的默认样式

• CSS3结构类： nth 选择器

:first-child/last-child

语法： element:first-child

选择属于父元素的首个/最后一个子元素的每个 element 元素，注意 element 为子元素。

`:nth-child(n)`

选择某元素下的第n个 element 元素（n是一个简单的表达式，不能用其他的字母代替），括号里还可以传 odd和 even 两个关键字

:nth-last-child(n)

选择某个元素下的n个 element 子元素，从最后一个子元素计算

:nth-of-type(n)

语法： element:nth-of-type(n)

匹配属于父元素的特定类型的第n个子元素，element 为指定类型的子元素

:nth-last-of-type

匹配属于父元素的特定类型的第n个子元素，从最后一个计数

:first-of-type/:last-of-type

匹配属于其父元素的特定类型的首个/最后一个子元素的每个元素

:only-child

匹配属于父元素的唯一子元素的每个元素

:only-of-type
匹配属于其父元素特定类型的唯一子元素的每个元素

:empty

匹配没有子元素（包括文本节点）的每个元素

• 否定选择器：not

定义：匹配非 元素或者选择器 的每个元素

语法：父元素：not（子元素或者选择器）

例如：ul:not(span){}

• 伪元素（也可以使用：）

element::first-line
定义：对元素的第一行文本进行设置，只能用于块级元素
element::first-letter
定义：用于向文本的首字母设置特殊样式，只能用于块级元素
element::before
定义：在元素的内容前面插入新内容，常与 content 配合使用
element::after
定义：在元素的内容后面插入新内容，常与 content 配合使用
element::selection

定义：用于设置浏览器中选中文本后的背景色与前景色

伪元素与元素的区别：

无法通过js获取DOM

无法通过浏览器开发工具直接查看

伪元素默认是 inline

使用伪元素注意事项：

1、使用伪元素 before 和 after 必须设置 content

2、使用伪元素 before 和 after 显示背景图，一定要使用 display 设置为块元素

3、使用伪元素 before 和 after 设置为 display： link-block，需要再次设置 vertical-align:middle

CSS3边框与圆角

1.CSS3圆角border-radius

定义：可以为元素添加圆角边框（块元素，行内块元素，行元素）

属性：

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

属性值 ：
四个值：左上角 、右上角、 右下角、 左下角

三个值：左上角、右上角和左下角、右下角

两个值：左上角和右下角、右上角和左下角

一个值：4个角都生效

border-radius 中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径

圆形与随圆：

一旦使用百分比，参照的是元素本身的高度与宽度当拿50%时，宽等于高为圆形 宽不等于高为椭圆形

2.盒模型box-shedow

定义：可以控制一个或多个下拉阴影的框

语法：box-shadow: 水平方向的偏移量、垂直方向的偏移量、模糊程度、扩展程度、颜色、是否具有内阴影

属性值的介绍：

偏移量

1
2
3
4

把元素左上角（0，0）作为基准点，找水
平方向和垂直方向的偏移量
水平： 正值 --- 右 ，负值 --- 左
垂直： 正值 --- 下 ，负值 --- 上

模糊程度：

1
2

边界模糊，但是边界线未动
由边界线向外模糊多少像素

扩展程度：

1

盒子阴影，上下左右都向外扩展多少像素

是否具有内阴影

1
2
3
4

inset(默认没有，也就是默认是外阴影)
加上inset,盒子的阴影为内阴影

扩展程度可为负值，但是模糊程度不可以

CSS3背景与渐变

• background-image:

语法：

background-image:url('1.jpg),url('2.jpg')

使用逗号把图片分开

注意：元素引入多个背景图片，前面图片会覆盖后面的图片

• background-clip:

定义：指定背景的绘制区域（裁剪）

语法：

background-cilp: border-box / padding-box / content-box

属性介绍：