CSS3

CSS3新增选择器

子级选择器

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

div > p {
      color: red;
    }

兄弟选择器

相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素， 而且二者有相同的父元素。

书写语法： E1 + E2。

注意：

• 选中的是紧跟在 E1 之后的同级元素 E2。

• 只能选中紧跟在后面的一个 E2 元素。

• 二者有相同的父元素。

• 在 + 符号前后可以添加空格书写。

  h1 + div {
        background-color: pink;
      }
  

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。

书写语法： element1~element2

注意：

• 选择 element1 之后出现的所有 element2。
• 两种元素必须拥有相同的父元素， 但是 element2 不必直接紧随 element1。
• ~ 符号前后可以添加空格书写。

h2 ~ p {
      background-color: red;
    }

结构伪类选择器

nth-child（n）

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个
• 常见的关键词 even 偶数 odd 奇数
• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）
• 但是第 0 元素或者超出了元素的个数会被忽略

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

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

伪元素选择器

h5 写法和传统写法区别

• 单冒号 E:before
• 双冒号 E::before

浏览器对以上写法都能识别， 双冒号是 h5 的语法规范。

伪元素的注意事项

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

   div::before {
      content: "1";
      display: block;
      height: 50px;
      background-color: pink;
    }
    div::after {
      content: "2";
      display: block;
      height: 50px;
      background-color: pink;
    }
    p::first-letter {
      color: blue;
    }
    p::first-line {
      color: red;
    }

属性选择器

属性选择器用来选择包含指定属性的标签。

选择器权重

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

CSS3盒模型

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

content-box 标准模式

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

box-sizing: content-box;

border-box 怪异模式

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

box-sizing: border-box;

CSS3新增属性

边框圆角

• 属性名：border­radius

• 作用：设置边框的圆角。

• 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

  属性值	说明
  x-radius / y-radius	/ 分割两部分属性值，前面为水平半径，后面为垂直半径， 得到的是椭圆角。
  radius	一个属性值，则水平和垂直都设置为同一个值，得到的是 圆角。

border-radius: 100px/50px;

border-radius: 130px;

单一属性

• border-top-left-radius: 半径;

• border-top-right-radius: 半径;

• border-bottom-right-radius: 半径;

• border-bottom-left-radius: 半径;

  border-top-left-radius: 50px;
  

简写方法

• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。

• border-radius: 左上角 右上角 右下角 左下角;

• border-radius: 左上角 右上角和左下角 右下角 ;

• border-radius: 左上角和右下角 右上角和左下角 ;

• border-radius: 四个角相同;

  border-radius: 10px 20px 30px 40px;
  border-radius: 50%;
  

/ 的属性值写法

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

border-radius: 50px 100px 20px / 40px 60px;

浏览器兼容

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

文字阴影

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

文字阴影语法

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

text-shadow: 3px 3px 5px #f00;

多层阴影

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

text-shadow: 3px 3px #f00,
     6px 6px #0f0,
     9px 9px #00f;

盒子阴影

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

边框阴影语法

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

box-shadow: 20px 20px 5px 20px #f00 inset;

多层阴影

box-shadow 属性也可以向盒子添加多个阴影， 逗号分隔多个阴影的属性值。

注意： 多阴影中， 先写的阴影压盖在后写的阴影上。

box-shadow: 20px 20px 5px #f00,
      40px 40px 5px #0f0,
      60px 60px 5px #00f;

过渡属性

动画效果

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

过渡属性

属性名：transition

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

语法格式： 过渡属性：属性 过渡时间 时间曲线 延迟时间

单一属性写法

transition-property过渡的属性

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

时间

过渡时间： 以s秒为单位。

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

transition-timing-function 时间曲线

transition: all 2s ease-in-out 0s;

浏览器兼容

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

2D 转换

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

位移 translate()

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

transform: translate(100px,50px);
transform: translate(-100px);

缩放 scale()

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

      transform: scale(1,1);
      transform: scale(0.5);
      transform: scaleX(0.5);
      transform: scaleY(0.5);

旋转 rotate()

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

• 书写语法：rotate(数字deg)

• 其中， deg为度数单位， 正数表示顺时针旋转， 负数表示逆时针旋转。 2D的旋转只有一个属性值。

• 注意： 元素旋转后， 坐标轴也跟着发生转变。

• 因此， 多个属性值同时设置给 transform 时， 书写顺序不同导致的转换效果有差异。

      /* 旋转 */
      transform: rotate(-30deg);
      /* 先旋转后位移 */
      transform: rotate(30deg) translate(150px);
      /* 先位移后旋转 */
      transform: translate(150px) rotate(30deg) ;
  

倾斜 skew()

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

transform: skew(0,30deg);

transform­origin 属性

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

• 调整元素的基准点。

• 属性值： 包含两个， 中间使用空格分隔。

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

  transform-origin: right top;
  

3D转换

transform 属性不止能实现 2D 转换， 也可以制作 3D 立体转换效果， 比普通的 x、 y 轴组成的平面效果多了一条 z 轴。正方向分别为下，右，左。

透视

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

透视属性 perspective

属性名： perspective

• 作用： 设置在 z 轴的视线焦点的观察位置， 从而实现 3D 查看效果。

• 属性值： 像素值， 数值越大， 观察点距离 z 轴原点越远， 图形效果越完整且接近原始尺寸。

• 注意： 透视属性需要设置给 3D 变化元素的父级。

  perspective: 500px;
  

3D 旋转

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

      /* 沿 X 轴进行旋转 */
      transform: rotateX(-60deg);
      /* 沿 Y 轴进行旋转 */
      transform: rotateY(-60deg);
      /* 沿 Z 轴进行旋转 */
      transform: rotateZ(-60deg);

3D 位移

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

      transform: translateX(-200px);
      transform: translateY(-200px);
      transform: translateZ(200px);

transform-style属性

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

• 属性值：

  • flat： 所有子元素在 2D 平面呈现
  • preserve-3d： 保留 3D 空间

• 3D 元素构建是指某个图形是由多个元素构成的， 可以给这些元素的父元素设置

• transform-style: preserve-3d， 来使其变成一个真正的 3D 图形。

• 一般来说， 该属性设置给 3D 变换图形的父级元素。

  transform-style: preserve-3d;
  

浏览器兼容

• Internet Explorer 10、 Firefox 以及 Opera 支持 transform 属性。
• Chrome 和 Safari 需要前缀 -webkit-。
• Internet Explorer 9 需要前缀 -ms-。

动画

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

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

@keyframes 规则

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式， 就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

需要使用百分比来规定变化发生的时间， 或用关键词 "from" 和 "to"， 等同于 0% 和 100%。0% 是动画的开始， 100% 是动画的完成。

@keyframes 书写方法

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

    @keyframes move {
      0% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(100px);
      }
      50% {
        transform: translateY(0);
      }
      75% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(0);
      }
    }

animation 属性

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

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

其中必须设置动画名称和过渡时间， 其他属性值可以根据需求设置。

单一属性列表

animation: move 3s linear infinite;

浏览器兼容

• Internet Explorer 10、 Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
• Chrome 和 Safari 需要前缀 -webkit-。
• Internet Explorer 9， 以及更早的版本， 不支持 @keyframe 规则或 animation 属性。