CSS3新特性

原创已于 2025-10-12 19:01:36 修改 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端

于 2025-03-23 23:28:04 首次发布

前端同时被 2 个专栏收录

342 篇文章

订阅专栏

CSS+HTML5

27 篇文章

订阅专栏

CSS3新特性

1.CSS3有哪些新特性
2.新选择器
3.新属性
4.颜色渐变
- 4.1 linear-gradient线性渐变
- 4.2 radial-gradient径向渐变
5.过渡
6.动画
7.2D转换和3D转换
8.弹性布局
9.网格布局grid
10.CSS兼容性
11.媒体查询

1.CSS3有哪些新特性

(1) 新选择器

伪类
first-of-type、last-of-type、nth-child(n)等
伪元素
::before、::after、::first-letter、::first-line

(2) 新属性

边框
border-radius(边框圆角)、box-shadow(边框阴影)、border-image(使用图片绘制边框)
边框外轮廓
outline
背景
background-clip(对背景图进行裁剪)、background-origin(设置背景图的原点)、background-size(背景大小)
文本
text-shadow(文本阴影)、text-overflow(文本溢出)、text-decoration(文本修饰)、text-stroke(文本描边)、white-space(文本换行)
增强了颜色
增加了HSL，HSLA，RGBA几种新的颜色模式，新增opacity属性来控制透明度。
盒子模型
box-sizing

(3) 新增长度单位

rem根元素字体大小的倍数，只与根元素字体大小有关。
vw视口宽度的百分之多少 10vw就是视口宽度的10%
vh视口高度的百分之多少 10vh就是视口高度的10%
vmax视口宽高中大的那个的百分之多少。（了解即可）
vmin视口宽高中小的那个的百分之多少。（了解即可）

(4) 字体图标
CSS3新增了web字体，可以显示用户电脑上没有安装的字体。

font-face一般和font-family一块使用；

@font-face {
  font-family: "custom-font";
  src: url('./fonts/KOMIKAX_.ttf') format('truetype');
}
.fonts-area{
  width: 100%;
  height: 30px;
  font-family:"custom-font";
  font-size:24px;
}

(5) 渐变色
linear-gradient(线性渐变)和radial-gradient(径向渐变)

(6) 过渡
transaction

(7) 动画
@keyform

(8) 转换
transform

(9) 弹性布局flex

(10) 网格布局grid

(11) 增加浏览器私有前缀

(12) 其它
媒体查询、多列布局、混合模式

2.新选择器

关于选择器方面的内容详情见我写的文章https://blog.youkuaiyun.com/fageaaa/article/details/146458444。

3.新属性

3.1 边框属性

3.1.1 border-radius(边框圆角)

3.1.2 border-image(使用图片绘制边框)

3.1.3 box-shadow(边框阴影)

用法:
box-shadow: h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(阴影模糊半径) spread(阴影扩散半径) color(阴影的颜色) inset(可选参数，用于指定阴影是否为内阴影。如果设置为inset，则阴影将出现在元素内部);

参数介绍:

h-shadow：水平阴影位移，大于0时阴影右移，小于0时阴影左移；
v-shadow：垂直阴影位移，大于0时阴影下移，小于0是阴影上移；
blur：可选参数，阴影模糊半径，值越大颜色越淡，阴影越模糊，为正值，默认为0；
spread：可选参数，阴影扩散半径，值越大阴影面积越大，可正可负，默认为0；
color：可选参数，阴影颜色，默认为黑色；
inset：可选参数，内阴影，一般放在开头或末尾

示例:

box-shadow:300px 300px 20px 10px;

阴影宽高变成了300+10*2=320px;在320基础上还向内外模糊了20/2=10px;

应用：
四边阴影：

.four-area{
  box-shadow: 0px 0px 20px 5px red;
}

在这里插入图片描述

三边阴影:

.three-area{
  box-shadow: 0px 5px 10px 0px red;
}

在这里插入图片描述

二边阴影(需要嵌套实现):

.two-area{
  box-shadow: 0 10px 10px -5px red;
}
.two-area>div{
  width: 100px;
  height: 100px;
  box-shadow: 0 -10px 10px -5px red;
}

<div class="normal-area two-area">
   <div></div>
</div>

在这里插入图片描述

单边阴影:

.one-area{
  box-shadow: 0 10px 10px -5px red;
}

在这里插入图片描述

3.2 边框外轮廓属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     hmtl,body{
       margin: 0;
       padding: 0;
     }
     .container{
       width: 100%;
       height: 600px;
       background-color: #67c23a;
     }
    .box1{
      width: 400px;
      height: 400px;
      margin: auto;
      border: 20px solid red;
      /* 边框外轮廓 不占位*/
      /* outline-width: 20px;
      outline-color: blue;
      outline-style: solid; */
      /* 偏移量 有负值 是一个独立的属性 */
      outline-offset: 10px;
      /* 复合属性 */
      outline: 20px solid orange;
    }
    </style>
</head>
<body>
<div>
  <div class="container">
    <div class="box1"></div>
  </div>
</div>
</body>
</html>

在这里插入图片描述

3.3 背景属性

3.3.1 background-clip(对背景图进行裁剪)

<template>
    <div>
        <div class="box1">你好</div>
    </div>
</template>
<style scoped>
.box1{
    width: 200px;
    height: 200px;
    background-color: rgb(225, 225, 245);
    margin: auto;
    /* 从padding左上角开始铺图 */
    padding: 20px;
    font-size: 80px;
    font-weight: bold;
    color: rgba(186, 114, 114, 0.5);
    /* dashed虚线 */
    border: 20px dashed rgba(186, 114, 114, 0.5);
    /* 大图最能看出效果 */
    background-image: url('../assets/images/mobile_d.jpg');
    background-repeat: no-repeat;
    /*background-clip 裁剪属性 默认值border-box border以外的背景图是不可见的*/
    /* padding-box  超过padding以外的背景图是不可见的 */
    /* content-box  超过内容以外的背景图是不可见的 */
    /* text  前提是需要把文字改成透明的颜色 文字背景色 只呈现在文字上面*/
    -webkit-background-clip: text;
    background-clip: text;
}
</style>

3.3.2 background-origin(设置背景图的原点)

<template>
    <div>
        <div class="box1"></div>
    </div>
</template>
<style scoped>
.box1{
    width: 200px;
    height: 200px;
    background-color: rgb(225, 225, 245);
    margin: auto;
    /* 从padding左上角开始铺图 */
    padding: 20px;
    /* dashed虚线 */
    border: 20px dashed rgba(186, 114, 114, 0.5);
    /* 小图最能看出效果 */
    background-image: url('../assets/images/pak.png');
    background-repeat: no-repeat;
    /* background-origin默认值padding-box  从padding左上角开始铺图 */
    /* content-box 从内容左上角开始铺图 */
    /* border-box 从border左上角开始铺图 */
    background-origin: border-box;
}
</style>

3.3.3 background-size(背景大小)

<template>
    <div>
        <div class="box1"></div>
    </div>
</template>
<style scoped>
.box1{
    width: 200px;
    height: 200px;
    margin: auto;
    border: 1px solid red;
    /* 长度比不一样的图最能看出效果 */
    background-image: url('../assets/images/bg.png');
    /*background-size属性值 两个值 不能是负值 背景图的宽高 200px 200px 整个图片会变形*/
    /*background-size属性值 两个值 不能是负值 背景图的宽高 100% 100%  整个图片会变形 和容器一样的宽高*/
    /*background-size属性值 contain包含 长宽比不够的会重铺  不会变形 完整呈现出来图片 可能会造成容器里部分区域没有背景图片*/
    /*background-size属性值 cover 不变形 尽可能展示完整的图片 或是长 或是宽 等比例缩放 如果比例和容器不一样 图片有可能显示不完整 相对比较好的选择*/
    /* 默认是auto 左上角对齐 */
    background-size: cover;
}
</style>

3.4 文本属性

3.4.1 text-shadow(文本阴影)

<template>
    <div>
        <h1>你好</h1>
    </div>
</template>
<style scoped>
h1{
   font-size: 80px;
   text-align: center;
   /* 文本阴影 */
   /* text-shadow:3px 3px; */
   /* text-shadow:3px 3px red; */
   /* 水平阴影的位置 垂直阴影的位置 模糊的距离 颜色 */
   text-shadow:3px 3px 10px red;
}
</style>

3.4.2 white-space(文本换行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style >
    div{
      width: 200px;
      height: 200px;
      border: 1px solid black;
      font-size: 20px;
      /* 强制不换行nowrap*/
      /*  normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格 默认值*/
      /*  pre 原样输出，与pre标签的效果相同 */
      /* pre-wrap pre-line 超出元素边界自动换行 */
      white-space: nowrap;
    }
  </style>
</head>
<body>
<div>
  发圣诞节快乐
  迦拉克隆看就看
  发圣诞节快乐
  迦拉克隆看就看
  发圣诞节快乐
  迦拉克隆看就看
</div>
</body>
</html>

在这里插入图片描述

3.4.3 text-overflow(文本溢出)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style scoped>
    ul{
      width: 200px;
      height: 200px;
      border: 1px solid black;
      font-size: 20px;
      list-style: none;
      padding-left: 0;
    }
    li{
      margin-bottom: 10px;
      /* 第一个 */
      overflow: hidden;
      /* 第二个 */
      white-space: nowrap;
      /* 第三个属性才生效 */
      /* 文本溢出 必须配合overflow: hidden; 使用 */
      /* ellipsis 三个点   clip 截掉*/
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
<div>
  <ul>
    <li>一境界的人像摄影作品,除了对摄影师本身的素质提出要求之外,还依赖于一些客观因</li>
    <li>美丽大自然,美景似天堂 7分钟前 相关推</li>
    <li>是该市的标志,也是世界最闻名</li>
  </ul>
</div>
</body>
</html>

在这里插入图片描述

3.4.4 text-decoration(文本修饰)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style scoped>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid black;
      font-size: 20px;
      /* 文本修饰 下划线 underline  上划线overline  line-through中间线 默认是none*/
      /* text-decoration:none ; */
      /* text-decoration-line: line-through;
      text-decoration-color: red;
      text-decoration-style: dashed; */
      /* 复合属性 */
      text-decoration:line-through dashed red;
    }
  </style>
</head>
<body>
<div>
  发圣诞节快乐
  迦拉克隆看就看
</div>
</body>
</html>

在这里插入图片描述

3.4.5 text-stroke(文本描边)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1{
      font-size: 80px;
      /* -webkit-text-stroke-color: red;
      -webkit-text-stroke-width: 3px; */
      /* 宽度 颜色 */
      -webkit-text-stroke: 3px red;
      color: transparent;
    }
  </style>
</head>
<body>
<div>
  <h1>发圣诞节快乐迦拉克隆看就看</h1>
</div>
</body>
</html>

在这里插入图片描述

4.颜色渐变

4.1 linear-gradient线性渐变

.box{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to left, red, yellow);
}

在这里插入图片描述

.box{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to right, red, yellow);
}

在这里插入图片描述

.box{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to top, red, yellow);
}

在这里插入图片描述

.box{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to bottom, red, yellow);
}

在这里插入图片描述

 .box{
       width: 200px;
       height: 200px;
       background-image: linear-gradient(45deg, green, yellow);
 }

在这里插入图片描述

4.2 radial-gradient径向渐变

.box{
      width: 200px;
      height: 200px;
      background-image: radial-gradient(circle, red, yellow);
}

在这里插入图片描述

 .box{
      width: 200px;
      height: 200px;
      background-image: radial-gradient(at left, yellow, blue);
  }

在这里插入图片描述

 .box{
     width: 200px;
     height: 200px;
     background-image: radial-gradient(100px 20px, yellow, blue);
  }

在这里插入图片描述

5.过渡

5.1 概念

过渡是一种能够在元素状态发生改变时，通过动画效果平滑地过渡到新状态的技术。这使得用户界面变得更加生动、引人入胜。

CSS Transition允许你定义元素在状态变化时的过渡效果，比如改变元素的颜色、尺寸、位置等。最重要的是，这一切都可以通过简单的CSS代码实现，无需复杂的JavaScript。

5.2 格式

全称:ransition: <property> <duration> <transition-time-function> <delay>，如

transition:all 0 ease 0（默认值）

property:none,all,属性名（如果是多个属性则用逗号隔开）
duration:单位s或者ms
transition-time-function:
- ease 开始慢中间快结束慢
- linear:匀速
- ease-in:开始慢，结束快
- ease-out:开始快，结束慢
- ease-in-out开始慢，中间快，结束慢(与ease有区别,在速率上)
- cubic-bezier(贝塞尔曲线)，x1、x2、y1、y2四个参数.
  有网站可以专门模拟贝塞尔曲线，比如https://cubic-bezier.com/
delay:延时时间

5.3 代码示例

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡，常见的支持过渡的属性有：

颜色
长度值
百分比
z-index
opacity
2D变换属性
3D变换属性
阴影。

过渡属性建议放在容器身上不要放在:hover身上过渡需要触发条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .outer{
      width: 200px;
      height: 200px;
      background-color: aqua;
      /* 触发过渡是提前是变 跟数字相关 百分比相关 */
      /* 设置哪个属性需要过渡效果*/
      /* transition-property: height,width,background-color; */
      /* 让所有能过渡的属性，都过渡 */
      transition-property: all;
      /* 设置过渡时间 */
      /* 分别设置时间 */
      /* transition-duration: 1s,5s,1s; */
      /* 设置一个时间，所有人都用 */
      transition-duration: 1s;
    }
    .outer:hover{
      height: 400px;
      width: 400px;
      background-color:green;
      transform: rotate(45deg);
      box-shadow: 0px 0px 20px black;
      opacity: 1;
    }
  </style>
</head>
<body>
<div class="outer"></div>
</body>
</html>

高级使用—— 贝塞尔曲线:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 1000px;
            height: 450px;
            border:1px solid black;
        }
        .outer:hover .box{
            width: 1000px;
        }
        .box{
            width: 200px;
            height: 50px;
            /* 让所有能过渡的属性，都过渡 */
            transition-property: all;
            /* 设置一个时间，所有人都用 */
            transition-duration: 1s;
            /* 过渡延迟 */
            transition-delay: 1s;
            /*  */
        }
        .box1{
            background-color: aqua;
            /* 慢 快 慢 */
            transition-timing-function: ease;
        }
        .box2{
            background-color: rgb(69, 158, 25);
            /* 匀速 */
            transition-timing-function: linear;
        }
        .box3{
            background-color: rgb(201, 134, 26);
            /* 慢 快 */
            transition-timing-function: ease-in;
        }
        .box4{
            background-color: rgb(164, 35, 215);
            /* 快 慢 */
            transition-timing-function: ease-out;
        }
        .box5{
            background-color: rgb(25, 192, 148);
            /*慢 快 慢 */
            transition-timing-function: ease-in-out;
        }
        .box6{
            background-color: rgb(174, 95, 118);
            /* 不考虑过渡的时间，直接就是终点 */
            transition-timing-function: step-start;
        }
        .box7{
            background-color: rgb(45, 122, 163);
            /* 考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点 */
            transition-timing-function: step-end;
        }
        .box8{
            background-color: rgb(43, 164, 63);
            /* 分布过渡 和值有关 */
            transition-timing-function: steps(20,end);
        }
        .box9{
            background-color: rgb(209, 215, 35);
            /* 无敌的贝塞尔曲线 https://cubic-bezier.com/  代码复制过来 */
            transition-timing-function: cubic-bezier(.57,.91,.41,1.41);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
    <div class="box box7"></div>
    <div class="box box8"></div>
    <div class="box box9"></div>
</div>
</body>
</html>

复合属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .outer{
      width: 1000px;
      height: 100px;
      border:1px solid black;
    }
    .inner{
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* 如果设置了一个时间，表示duration,如果设置了两个时间，第一个是duration,第二个是delay;其他值没有顺序要求 */
      transition: 2s all 0.5s linear;
    }
    .outer:hover  .inner{
      width: 1000px;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>

6.动画

6.1 动画属性

animation-name 指定动画的关键帧名称
animation-duration：规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）
animation-delay：动画效果的延迟，等待一段时间后在执行动画
animation-timing-function：动画的时序函数
animation-iteration-count 动画执行的次数
- 1 一次
- infinite 无限执行
animation-direction 指定动画运行的方向
- normal 从from向to运行，每次都是这样，默认值
- reverse 从to向from运行，每次都是这样
- alternate 从from向to运行，重复执行动画时反向执行
- alternate-reverse 从to向from运行，重复执行动画时反向执行
animation-play-state 设置动画的执行状态
- running 动画执行，默认值
- paused 动画暂停
animation-fill-mode 动画的填充模式
- none 动画执行完毕，元素回到原来位置，默认值
- forwards 动画执行完毕，元素会停止在动画结束的位置
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards和backwards
animation 所有动画属性的简写属性，除了animation-play-state 属性

6.2 动画复合属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态。如:

animation: myfirst 5s linear 2s infinite alternate;

6.3 示例

@keyframes 动画名称 {
   0% {
     width: 100px;
   }
   100% {
     width: 200px;
   }
}
div {
 width: 200px;
 height: 200px;
 background-color: aqua;
 margin: 100px auto;
 /* 调用动画 */
 animation-name: 动画名称;
 /* 持续时间 */
 animation-duration: 持续时间;
}

6.4 动画与过渡的区别

最主要的区别就是：

动画不需要任何的触发条件，而过渡必须得有触发条件
动画从开始到结束的整个过程当中，都可以通过关键帧，去进行精细的设置。而过渡确不能，只关注始末，从开始到结束的变化过程中，是不可操作的。

7.2D转换和3D转换

7.1 2D转换

7.1.1 位移

translateX(x)
translateY(y)
translate(x,y)

7.1.2 旋转(默认以元素的中心为基准)

rolate(angle),如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .container{
          margin-left: 100px;
          margin-top: 100px;
          width: 200px;
          height: 200px;
          border: 1px solid #555555;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: #409eff;
          transform: rotate(45deg);
      }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
    </div>
</body>
</html>

在这里插入图片描述

7.1.3 缩放(默认以元素的中心为基准)

scale(number)
scale(x,y)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body,html{
          background-color: #67c23a;
      }
      .box1{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: #409eff;
          transform: scale(1,3);
      }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

7.1.4 变形

skew(x)：沿着x轴方向变形xdeg
skew(x,y)
skewX(x)
skewY(y)
x轴:为正则为左变形，为负则为右变形
y轴:为正则向上变形，为负则向下变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body,html{
          background-color: #67c23a;
          margin: 0;
          padding: 0;
      }
      .box1{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: #409eff;
        transform: skew(45deg);
      }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

7.1.5 变换的原点

默认是元素的中心，即transfrom-origin:center center;
可改变:top、bottom、center、left、right
只设置一个，另外一个为默认值(则为center)

<template>
  <div class="outer"></div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 100px;
  /* 变换原点 left top 左上角为原点  通过关键词调整变换原点*/
  /* transform-origin: left top; */
  /* 通过具体像素值调整变换原点 */
  /* transform-origin: 50px 50px; */
  /* 通过百分比调整变换原点 */
  /* transform-origin: 10% 20%; */
  /* 只给一个值 */
  transform-origin: left;
  /* 变换原点位置的改变对 旋转 有影像 */
  transform: rotate(30deg);
  /* 变换原点位置的改变对 位移 没有影像 */
  /* transform: translate(100px,100px);  */
  /* 变换原点位置的改变对 缩放 有影像 */
  /* transform: scale(1.4);  */
}
</style>

7.1.6 变换的特点

变换之后的元素不会脱离文档流；
行内元素不能变化，需将display改为block或者inline-block
多重变换(从右往左)

7.2 3D转换

7.2.1 3D位移

transform:translateX(100px)：仅仅是在 X 轴上移动
transform:translateY(100px)：仅仅是在 Y 轴上移动
transform:translateZ(100px)：仅仅是在 Z 轴上移动（注意：translateZ一般用 px 单位）
transform:translate3d(x, y, z)：其中 x、y、z 分别指要移动的轴的方向的距离

注意:z值为正表示向屏幕外；为负值表示向屏幕内；

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动（要借助透视）。

7.2.2 透视perspective

透视写在被观察元素的父盒子上面。

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

7.2.3 3D旋转rotate3d

transform: rotateX(45deg)：沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg)：沿着 y 轴正方向旋转 45deg
transform: rotateZ(45deg)：沿着 z 轴正方向旋转 45deg
transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转 deg 为角度（了解即可）

7.2.4 3D呈现transfrom-style

控制子元素是否开启三维立体环境

transform-style: flat 子元素不开启3d立体空间（默认的）
transform-style: preserve-3d; 子元素开启立体空间

思考:说一下3D变换的旋转方向左手准则？

左手的手拇指指向 x 轴的正方向，其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向；
左手的手拇指指向 y 轴的正方向，其余手指的弯曲方向就是该元素沿着 y 轴旋转的方向（正值)；
左手的手拇指指向 z 轴的正方向，其余手指的弯曲方向就是该元素沿着 z轴旋转的方向（正值)；

7.2.5 其它属性

transfrom-origin 参考原点
backface-visibility：属性定义当元素旋转到背向屏幕时候是否可见。visible表示背面可见(默认值)；hidden表示不可见；

7.2.6 代码示例

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>transform-style</title>
  <style>
    body {
      perspective: 500px;
    }

    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 2s;
      /* 让子元素保持3d立体空间环境 */
      transform-style: preserve-3d;
    }

    .box:hover {
      transform: rotateY(60deg);
    }

    .box div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
    }

    .box div:last-child {
      background-color: purple;
      transform: rotateX(60deg);
    }

  </style>
</head>

<body>
<div class="box">
  <div></div>
  <div></div>
</div>
</body>
</html>

初始界面:

在这里插入图片描述
鼠标悬浮在box上:

在这里插入图片描述

7.3 transfrom、transition、animation辨析

transform:转换
本身不会呈现过渡效果，经常与transition和animation一块使用。包含rolate旋转、translate位移、scale缩放、skew扭曲
transition:过渡。元素中某些属性从一种值变为另外一种值的过程，需要有事件触发，通常与hover等事件配合;
animation:动画，用@keyframes描述每一帧的样式，animation是自发的，立即播放。

注意:动画从开始到结束的整个过程当中，都可以通过关键帧，去进行精细的设置。而过渡确不能，只关注始末，从开始到结束的变化过程中，是不可操作的。

8.弹性布局

8.1 弹性容器属性

8.1.1 flex-direction

设置主轴的方向

row、
row-reverse、
column、
column-reverse

8.1.2 justify-content

设置主轴上的子元素排列方式

flex-start
flex-end
center
space-around
space-between

8.1.3 flex-wrap

设置子元素是否换行。

nowrap(默认值,这时候会压缩宽度)
wrap

8.1.4 flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap。如flex-flow:row wrap。

8.1.5 align-content

设置侧轴上的子元素的排列方式（多行）

flex-start
flex-end
center
space-around
space-around
stretch行拉伸以占据剩余空间（默认值）

8.1.6 align-items

设置侧轴上的子元素排列方式（单行）

flex-start
flex-end
center
stretch（拉伸,是默认值，拉伸到整个父容器。注意：前提是子盒子没有指定高度，否则没有效果！)

问题:align-content和align-items什么区别?
他们都是弹性盒子布局中的属性。align-content是描述容器中子元素侧轴在多行时候的排列方式；align-items是描述容器中子元素侧轴在单行时候的排列方式；

8.2 弹性元素(弹性项目)属性

8.2.1 flex-grow伸展系数

flex-grow 指定弹性元素的伸展系数，默认值为0。当父元素有多余空间的时候，子元素如何伸展呢?

公式：剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 。

举个例子：
三个宽度120px（3*120px=360px）的子元素放在一个宽度420px的父级元素中，父级元素使用flex布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html,body{
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 420px;
        height: 200px;
        background-color: yellow;
      }
      .item {
        width: 120px;
        height: 120px;
      }
      .item1{
        background-color: #67c23a;
      }
      .item2{
        background-color: #d9534f;
      }
      .item3{
        background-color: #409eff;
      }
    </style>
</head>
<body>
<div class="container">
  <div class="item item1">120px</div>
  <div class="item item2">120px</div>
  <div class="item item3">120px</div>
</div>
</body>
</html>

在这里插入图片描述
三个item的flex-grow默认都是0，所以不会占用剩下的空间，还有60px剩余，如上图所示。

只给一个子元素设置flex-grow值设置了正值flex-grow（可以是flex-grow:1、flex-grow:2）的那个子元素，会占满父元素剩余的空间。其他子元素为默认值0，占原来自己的宽度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html,body{
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 420px;
        height: 200px;
        background-color: yellow;
      }
      .item {
        width: 120px;
        height: 120px;
      }
      .item1{
        background-color: #67c23a;
        flex-grow: 2;
      }
      .item2{
        background-color: #d9534f;
      }
      .item3{
        background-color: #409eff;
      }
    </style>
</head>
<body>
<div class="container">
  <div class="item item1">180px(flex:2)</div>
  <div class="item item2">120px</div>
  <div class="item item3">120px</div>
</div>
</body>
</html>

在这里插入图片描述

给多个元素设置flex-grow（flex-grow之和大于1）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html,body{
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 420px;
        height: 200px;
        background-color: yellow;
      }
      .item {
        width: 120px;
        height: 120px;
      }
      .item1{
        background-color: #67c23a;
        flex-grow: 2;
      }
      .item2{
        background-color: #d9534f;
        flex-grow: 3;
      }
      .item3{
        background-color: #409eff;
        flex-grow: 1;
      }
    </style>
</head>
<body>
<div class="container">
  <div class="item item1">140(flex-grow:2)</div>
  <div class="item item2">150px(flex-grow:3)</div>
  <div class="item item3">130px(flex-grow:1)</div>
</div>
</body>
</html>

在这里插入图片描述
给多个元素设置flex-grow（flex-grow之和小于1）：

    <style>
      html,body{
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 420px;
        height: 200px;
        background-color: yellow;
      }
      .item {
        width: 120px;
        height: 120px;
      }
      .item1{
        background-color: #67c23a;
        flex-grow: 0.2;
      }
      .item2{
        background-color: #d9534f;
        flex-grow: 0.3;
      }
      .item3{
        background-color: #409eff;
        flex-grow: 0.1;
      }
    </style>

在这里插入图片描述

8.2.2 flex-shrink缩减系数

flex-shrink 指定弹性元素的收缩系数，默认值为1。当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩呢?

公式：超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 ) 。

三个宽度160px（3*160px=480px>420px）的子元素放在一个宽度420px的父级元素中，父级元素使用flex布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html,body{
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 420px;
        height: 200px;
        background-color: yellow;
      }
      .item {
        width: 160px;
        height: 120px;
      }
      .item1{
        background-color: #67c23a;
      }
      .item2{
        background-color: #d9534f;
      }
      .item3{
        background-color: #409eff;
      }
    </style>
</head>
<body>
<div class="container">
  <div class="item item1">140px</div>
  <div class="item item2">140px</div>
  <div class="item item3">140px</div>
</div>
</body>
</html>

三个item的flex-shrink默认都是1，由于超出了480px-420px=60px,所以三个子元素等比例缩小20px（160px-20px=140px）。

下面给三个元素都设置flex-shrink（flex-shrink之和小于1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html,body{
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 420px;
        height: 200px;
        background-color: yellow;
      }
      .item {
        width: 160px;
        height: 120px;
      }
      .item1{
        background-color: #67c23a;
          flex-shrink: 0.1;
      }
      .item2{
        background-color: #d9534f;
          flex-shrink: 0.2;

      }
      .item3{
        background-color: #409eff;
          flex-shrink: 0.3;

      }
    </style>
</head>
<body>
<div class="container">
  <div class="item item1">154px(flex-shrink:0.1)</div>
  <div class="item item2">148px(flex-shrink:0.2)</div>
  <div class="item item3">142px(flex-shrink:0.3)</div>
</div>
</body>
</html>

在这里插入图片描述

8.2.3 flex-basis

元素在主轴上的基础长度,优先级比width高。

如果主轴是横向的，则该值指定的就是元素的宽度
如果主轴是纵向的，则该值指定的就是元素的高度。

ps:从上面地方就能理解width和flex-basis不完全一样!!!

8.2.4 flex

flex-grow、flex-shrink、flex-basis三个项目属性的集中。

.item {
   flex: flex-grow flex-shrink flex-basis | auto | none;
 }
//默认为0 1 auto

flex:1===flex：1 1 0%
flex:2===flex： 2 1 0%
flex:auto ===1 1 auto即等比例扩大或者压缩。
flex:none ===0 0 auto 即不扩大，也不压缩。

谈谈flex:1?
经常用作自适应布局，内容区会自动放大或缩小占满剩余空间。在chrome浏览器上也可以将flex: 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局-flex属性</title>
    <style>
        .parent {
            display: flex;
            background-color: burlywood;
            height: 200px;
        }
        .son1 {
            width: 200px; //或者 height: 200px;
            flex: none; // 加不加都可 相当于flex: 0 0 auto;
            background-color: antiquewhite;
            height: 200px;
        }
        .son2 {
            flex: 1;  // flex: 1 1 0%;
            background-color: aqua;
            height: 200px;
        }
    </style>
</head>
<body>
  <div class="parent">
      <div class="son1">200px</div>
      <div class="son2"></div>
  </div>
</body>
</html>

在这里插入图片描述

8.2.5 order

order属性定义项目的排列顺序。默认为0，从小到大排列.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body{
      padding: 0;
      margin: 0;
    }
    .container {
      display: flex;
      width: 420px;
      height: 200px;
      background-color: yellow;
    }
    .item {
      width: 120px;
      height: 120px;
    }
    .item1{
      background-color: #67c23a;
      order: 3;
    }
    .item2{
      background-color: #d9534f;
      order: 1;
    }
    .item3{
      background-color: #409eff;
      order: 2;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="item item1">a(order:3)</div>
  <div class="item item2">b(order:1)</div>
  <div class="item item3">c(order:2)</div>
</div>
</body>
</html>

在这里插入图片描述

8.2.6 align-self

项目属性align-self和align-items类似。align-items设置在容器上,作用所有的项目。align-self 设置在项目上，作用单个项目。

9.网格布局grid

9.1 基础辨析

与flex辨析
相同点:都有容器项目之分
不同点:flex是一维布局；grid是二维布局
与table辨析
相同点:都有行列之分
不同点:代码嵌套不同

9.2 grid容器属性

9.2.1 触发网格布局

display:grid;
display：inline-grid;

9.2.2 划分行列属性

grid-template-rows
grid-template-columns

纯数字:如100px 100px 100px;
百分比:如20% 30% 50%;
重复函数(当网格很多时候):repeat(num1,num2),num1表示重复次数，num2表示重复的数值；
自动填充:repeat(auto-fill, 30%),可容纳三个30%
auto自动:100px auto 100px
片段划分:1fr 2fr 3fr
minmaxh函数:100px 200px minmax(100px,200px),minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

9.2.3 调整间距

grid-row-gap:20px;
grid-column-gap:30px;
grid-gap:20px 30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
     html,body{
       margin: 0;
       padding: 0;
     }
     .box{
       width: 300px;
       height: 300px;
       display: grid;
       grid-template-rows:60px 100px 80px;
       grid-template-columns:100px 60px 80px;
       grid-row-gap:30px;
       grid-column-gap:30px;
     }
     .box-item{
       background-color: #d9534f;
     }
   </style>
</head>
<body>
   <div class="box">
     <div class="box-item">1</div>
     <div class="box-item">2</div>
     <div class="box-item">3</div>
     <div class="box-item">4</div>
     <div class="box-item">5</div>
     <div class="box-item">6</div>
     <div class="box-item">7</div>
     <div class="box-item">8</div>
     <div class="box-item">9</div>
   </div>
</body>
</html>

在这里插入图片描述

9.2.4 添加项目调整顺序

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是 “先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由 grid-auto-flow 属性决定，默认值是 row，即 “先行后列”。也可以将它设成 column，变成 “先列后行”。

grid-auto-flow: column;

9.2.5 项目对齐方式

项目水平对齐方式 justify-items:start | end | center | stretch(默认值);
项目垂直对齐方式 align-items:start | end | center | stretch(默认值);
place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。

9.2.6 网格位于容器的对齐方式

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。

place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式。

9.3 grid项目属性

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

grid-column属性定义了网格元素列的开始和结束位置，也可以使用关键字 “span” 来定义元素将跨越的列数。
示例1：在第 1 列开始，在第 4 列前结束

grid-column: 1 / 4;
/*
相当于：
grid-column-start: 1;
grid-column-end: 4;
*/

示例3：在第 1 行开始，在第 4行前结束

grid-row: 1 / 4;
/*
相当于：
grid-row-start: 1;
grid-row-end: 4;
*/

.box{
  grid-column-start:2;
  grid-column-end:4;
  grid-row-start:4;
  grid-row-end:5;
}
相当于:
.box{
  grid-column:2/4;
  grid-row:4/5;
}

10.CSS兼容性

查询css3兼容性的网站：https://caniuse.com/

浏览器私有前缀是为了兼容老版本的写法。

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表safari、chrome、Edge私有属性
-o-：代表 Opera 私有属性

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

ps：当用框架开发时候，构建工具会通过某些loader(postcss-loader)来自动加这些属性

11.媒体查询

CSS3之前就有，那时候不叫媒体查询。根据设备的不同加载不同的样式。

<style>
 .container {
   height: 150px;
   background-color: black;
   margin: 0 auto;
 }

/* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}

/* 2. 小屏幕下  大于等于 768px  布局容器改为 750px */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 3. 中等屏幕下  大于等于 992px  布局容器修改为 970px */
@media screen and (min-width: 992px) {
  .container {
    width: 970px;
  }
}

/* 4. 大屏幕下  大于等于 1200px  布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>