CSS3新增属性及应用

CSS3新增选择器

子级选择器

用于选取带有特定父元素的元素。
书写语法：element1 > element2
注意：如果e2元素不是父元素e1的直接子元素，则不会被选择。必须满足父子关系。

  div>p {
    color: red;
  }

兄弟选择器-相邻兄弟

相邻兄弟选择器可用于选择器紧接在另一个元素后的兄弟元素，且二者有相同的父元素。
书写语法：E1 + E2
注意：

• 选中的是紧跟在E1后的同级元素E2，二者有相同的父元素
• 只能选中紧跟在后面的一个E2元素
• +符号前后可添加空格

  h1 + p {
    margin-top: 50px;
  }

兄弟选择器-其他兄弟

其他兄弟选择器匹配同一个父元素中在E1后面的所有E2元素。
书写语法：E1 ~ E2
注意:

• 选择E1之后的所有E2
• 两个元素必须拥有同个父元素，但E2不需要紧跟E1
• ~符号前后可添加空格

  h2 ~ p{
    background-color:red;
  }

结构伪元素选择器

结构伪类选择器.PNG

nth-child(n)

• n可以是数字，关键字和公式
• 常见的关键字even偶数 odd奇数
• 第0个元素或超出元素个数会被忽略

e:nth-child(n)和e:nth-of-type(n)的区别

• e:nth-child(n) 匹配父元素的第n个子元素e，同时需要满足两个条件。
• nth-of-type(n)匹配同类型中的第n个同级兄弟元素e，会忽视其他统计的非同类型元素。

伪元素选择器

选择器	介绍
e::before	在e元素内部的前面插入一个元素
e::after	在e元素内部的后面插入一个元素
e::first-letter	选择到e容器内的第一个字母
e::first-line	选择到e容器内的第一行文本

h2写法是从传统写法单冒号变成双冒号，浏览器对单冒号和双冒号均能识别

注意事项

• 伪元素只能给双标签添加
• 冒号前不能有空格
• 伪元素里面必写属性content:"";
• before和after创建一个元素，但属于行内元素

属性选择器

属性选择器用来选择包含指定属性的表情

选择器	简介
e[att]	选择具有att属性的e元素
e[att="val"]	选择具有att属性且属性值等于val的e元素
e[att^="val"]	匹配具有att属性，且值以val开头的e元素
e[att$="val"]	匹配具有att属性，且值以val结尾的e元素
e[att*="val"]	匹配具有att属性，且值中含有val的e元素

选择器权重

• 基础选择器：id选择器 > 类选择器 > 标签选择器 > *
• 伪类选择器、属性选择器的权重等于嘞选择器
• 伪元素选择器的权重等于标签选择器

CSS3盒模型

css3通过box-sizing指定盒模型。

content-box标准模式

标准模式总，盒子总体大小为：
width(height) + padding + border,内容区域是width和height部分。

  div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid red;
    box-sizing: content-box;
  }

border-box怪异模式

怪异模式中，盒子总体大小为width和height，添加padding和border后，内容区域会收缩。

  div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid red;
    box-sizing: border-box;
  }

CSS3新增属性-常用属性

边框圆角

属性名：border-radius
作用：设置边框的圆角
属性值：可以是像素或百分比，百分比参考的是盒子整体宽度、高度。

属性值	说明
x-radius/y-radius	/分隔两部分属性值，前面为水平半径，后为垂直半径
radius	水平垂直都为一个值，得到圆角

单一属性：

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-left-radius

简写：

• border-radius 左上角 右上角 左下角 右下角
• border-radius 左上角 右上角和左下角 右下角
• border-radius 左上角和右上角 左下角和右下角
• border-radius 四个角相同

border-radius:50% 20% 40% / 20% 30%

x、y轴不同圆角效果.PNG

浏览器兼容：
IE8一下版本不支持border-radius属性，其他浏览器都支持。

文字阴影

在CSS3中，text-shadow可向文本应用阴影。

属性值	说明
h-shadow	必需，水平阴影部分，允许负值
v-shadow	必需，垂直阴影部分，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

文字阴影语法

text-shadow属性向文本添加阴影，属性值有2-3个长度和一个可选的颜色进行规定，省略的长度是0。

h1 {
  text-shadow: 3px 4px 4px red;
}

多层阴影

text-shaow属性可添加多个阴影，用逗号分隔。注意：先写的阴影压盖在后写的阴影上。

h1 {
  text-shadow: 3px 4px 4px #f00,
               6px 6px 3px #0f0,
               9px 9px 3px #0f0f;
}

盒子阴影

在CSS3中，box-shadow属性用于对盒子边框添加阴影。

属性值	说明
h-shadow	必需，水平阴影部分，允许负值
v-shadow	必需，垂直阴影部分，允许负值
blur	可选，模糊的距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

边框阴影语法

box-shadow属性值有2-4个长度值，可选颜色及inset关键字规定，省略长度是0。

img {
  border:10px solid orange;
  box-shadow:3px 3px 5px 4px rgb(0,0,0);
}

多层阴影

box-shaow属性可向盒子添加多个阴影，用逗号分隔。注意：先写的阴影压盖在后写的阴影上。

img {
  border:10px solid orange;
  box-shadow:3px 3px 5px 4px rgb(0,0,0),
  box-shadow:7px 7px 5px 4px rgb(0,255,0),;
}

CSS3新增属性-过渡属性

CSS3出现之前，前端一般使用flash动画或js制作。

过渡属性

属性名：transition
作用：在不适用flash动画或js情况下，使用transition可以实现补间动画（过渡效果）。

transition: 过渡的属性 过渡时间 运动曲线 延时时间

单一属性写法

属性值	说明
transition-property	规定应用过渡的CSS属性名称
transition-duration	过渡花费的时间，默认0
transition-timing-function	过渡效果的时间曲线，默认"ease"
transition-delay	过渡效果合适开始，默认0

transition-property过渡的属性

• none 表示没有属性过渡
• all 表示所有变化的属性过渡
• 属性名使用具体的属性，多个属性名中间都好分隔

时间

过渡时间：以s秒为单位。
延时时间：以s秒为单位，0s也必须加单位。

transition-timing-function时间曲线

值	描述
linear	规定以相同速度至结束的过渡效果
ease	规定慢速开始，变快，慢速结束
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	慢速开始和结束的过渡效果
cubic-bezier(x1,y1,x2,y2)	在cubic-bezier函数自己定义的值

浏览器兼容
IE10、firefox、chrome以及opera支持transition属性。
safari需要前缀-webkit-。
IE9及更早版本不支持。

CSS3新增属性-2D转换

属性名：transform
作用：对元素进行移动、缩放、旋转、拉长或拉伸。可配合过渡实现动画效果。
属性值：多种转换方法的属性值。

位移translate()

transform的属性值为scale()时，可以实现元素位移。

移动.PNG

书写语法：

值	说明
translate(x,y)	x,y分别为水平和垂直方向位移的距离，可为px值或百分比，区分正负
translate(x)	只有一个数值，表示水平方向位移

缩放scale()

transform的属性值为scale()时，可以实现元素缩放。

缩放.PNG

书写语法：

值	说明
scale(x,y)	x,y分别改变元素宽、高的倍数
scale(n)	宽、高同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

旋转 rotate()

transform 属性值设置为rotate()时，实现元素旋转。

旋转.PNG

书写语法：
rotate(数字deg),deg是度数单位，正数表示顺时针旋转，负数表示逆时针旋转。
注意：元素旋转后，坐标轴也跟着转变。多个属性值同时设置给transform时，书写顺序不同导致转换效果差异。

倾斜 skew()

transform 属性设置为skew()时，实现元素的倾斜。

倾斜.PNG

书写语法:
transform:skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜角度，属性可正可负，数值不写默认为0。

transform-origin属性

作用：设置调整元素的水平和垂直方向原点位置。

值	说明
x	定义x轴的原点。可能值：left、center、right、像素、百分比
y	定义y轴的原点。可能值：top、center、bottom、像素、百分比

CSS3新增属性-3D转换

transform属性也可制作3D立体转换效果，比普通x、y轴组成的平面多了一条z轴，如下图：

3D效果的z轴.PNG

透视属性perspective

透视特点：近大远小
属性名：presperctive
作用：设置在z轴的视线焦点的观察位置，从而视线3D查看效果。
属性值：像素，数值越大，观察点距离z轴越远，图像越接近原始尺寸。
注意：透视属性需要设置给3D变化元素的父级。

3D旋转

值	说明
rotateX(angle)	沿着x轴的3D旋转
rotateY(angle)	沿着y轴的3D旋转
rotateZ(angle)	沿着z轴的3D旋转

注意：属性值区分正负，正数顺时针旋转，负数逆时针旋转。

3D位移

类似，位移也分为三个方向的移动：

值	说明
translateX(x)	设置x轴的位移值
translateY(y)	设置y轴的位移值
translateZ(z)	定义3D位移，设置z轴的位移值

属性值为像素或百分比，正负表示位移方向。

transform-style属性

用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标。

属性值	说明
flat	所有子元素在2D平面呈现
preserve-3d	保留3D空间

3D元素构建是指某个图形是由多个元素构成的，可以给这元素的父元素设置transform-style:preserve-3d，使其变成一个真正的3D图形。

一般来说，设置给3D变化图形的父级元素。

浏览器兼容
IE10、Firefox以及Opera支持transform属性。
Chrome和Safari需要-webkit-

IE9需要前缀-ms-

CSS3新增属性-动画

CSS3中提供了了自己的动画制作方法，可以在许多网页中取代动画图片、flash动画以及js
CSS3动画制作分为：创建动画、绑定动画。

@keyframes 规则

@keyframes规则用于创建动画。
在@keyframes中规定某CSS样式，能创建由一种样式逐渐变化为另外一种样式的效果。可以改变任意多的样式任意多的次数。
需要使用百分比来规定发生变化的时间，或用关键词"from"和"to"，等同于0%和100%。
0%是动画的开始，100%是动画的完成。

@keyframes书写方法

@keyframes 动画名称 {
  动画过程，可以添加任意百分比处的动画细节
}

animation属性

需要将@keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。
animation 属性用于对动画进行捆绑。
语法：

div {
  animation:动画名称 过渡时间 速度曲线 动画次数 延时时间;
}

单一属性列表

属性	描述
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期话费的时间，默认是0
animation-timing-function	规定动画的速度曲线，默认ease
animation-delay	规定动画何时开始，默认0
animation-iteration-count	规定动画播放次数，默认1，infinite表示无限次播放

浏览器兼容
IE10、Firefox以及Opera支持@keyframes规则和animation属性。
Chrome和Safari需要前缀-webkit-。
IE9以及更早版本，不支持@keyframes规则或animation属性。