CSS3

CSS3 新增选择器

CSS3 中，相对于 CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式。

子级选择器

子级选择器用于选取带有特定父元素的元素。
书写语法：element1 > element2
注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。
*> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。

兄弟选择器

element1+element2 匹配同一个父元素中紧跟在element1后面的一个element2元素
element1~element2 匹配同一个父元素中在element1后面的所有element2元素

相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
书写语法：E1 + E2。
注意：
a）选中的是紧跟在 E1 之后的同级元素 E2。
b）只能选中紧跟在后面的一个 E2 元素。
c） 二者有相同的父元素。
d）+ 符号前后可以添加空格书写。

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
书写语法：element1~element2
注意：
a）选择 element1 之后出现的所有 element2。
b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
c）~ 符号前后可以添加空格书写。

结构伪类选择器

image.png

nth-child（n）

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个
• 常见的关键词 even 偶数 odd 奇数
• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）

• 但是第 0 元素或者超出了元素的个数会被忽略

  
  image.png

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

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

伪元素选择器

新增伪元素

image.png

h5 写法和传统写法区别

• 1. 单冒号 E:before
• 2. 双冒号 E::before
• 浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

伪元素的注意事项

• 伪元素只能给双标签添加，不能给单标签添加
• 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
• 伪元素里面必须写上属性 content:“”；
• before 和 after 创建一个元素，但是属于行内元素。
• 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

属性选择器

image.png

选择器权重

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

CSS3 盒模型

• CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

  
  image.png

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

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

CSS3 新增属性 - 边框圆角

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

image.png

单一属性
border-top-left-radius: 半径;
border-top-right-radius: 半径;
border-bottom-right-radius: 半径;
border-bottom-left-radius: 半径;

简写方法
border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 左上角 右上角和左下角 右下角 ;
border-radius: 左上角和右下角 右上角和左下角 ;
border-radius: 四个角相同;

/ 的属性值写法
border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。

浏览器兼容
Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

CSS3 新增属性 - 文字阴影

在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

image.png

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

h1 {
    text-shadow: 3px 4px 4px #FF0000
}

多层阴影
text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上。

h1 {
    text-shadow: 3px 3px 3px #FF0000,
        6px 6px 3px #00ff00,
        9px 9px 3px #0000ff;
}

CSS3 新增属性 - 盒子阴影

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

image.png

边框阴影语法
box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略的长度是 0。

img {
            /* 边框阴影： 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 */
            border: 10px solid orange;
            box-shadow: 3px 3px 5px 4px rgb(0, 0, 0);
        }

多层阴影
box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上。

img {
            /* 边框阴影： 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 */
            border: 10px solid orange;
            box-shadow: 3px 3px 5px 4px rgb(255, 0, 0),
                  7px 7px 5px 4px rgb(0, 255, 0),
                  10px 10px 5px 4px rgb(0, 0, 255);
        }

CSS3 新增属性 - 过渡属性

动画效果

• CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画。
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

属性名：transition
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），
并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实
现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。
语法格式：

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

单一属性写法

image.png

transition-property过渡的属性

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

时间

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

transition-timing-function 时间曲线

image.png

贝塞尔曲线

image.png

浏览器兼容

• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-。
• 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

2D 转换

• 属性名：transform
• 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
• 属性值：多种转换方法的属性值，可以实现不同的转换效果。

位移 translate()
transform 的属性值为 translate() 时，可以实现位移效果。

image.png

缩放 scale()

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

image.png

旋转 rotate()

transform 属性值设置为 rotate() 时，实现元素的旋转。
书写语法：
rotate(数字deg)
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有
一个属性值。
注意：元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜。
书写语法：
transform: skew(数字deg,数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个
数值不写默认为0

transform­origin 属性
作用：设置调整元素的水平和垂直方向原点的位置。
调整元素的基准点。
属性值：包含两个，中间使用空格分隔。

image.png

3D 转换

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

  
  image.png

透视
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
透视特点：近大远小。
注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化，则设置透视效果。

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

3D 旋转
3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：
属性值：

image.png

3D 旋转
注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。

image.png

3D 位移
类似的，位移也分为三个方向的移动：
属性值：

image.png
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。

css3 动画制作分为两步：创建动画、绑定动画。

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

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

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

语法：
div {
animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间；
}
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

image.png