CSS3的新特性

已于 2024-03-23 08:29:08 修改
阅读量2.3k 收藏 15
点赞数 25
文章标签： css3 前端 css
于 2024-03-23 08:26:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45086164/article/details/136957847
版权

css3的新特性如下：

1.新增了更加实用的选择器，例如：动态伪类选择器，目标伪类选择器，伪元素选择器等等。
2.新增了更好的视觉效果，例如：圆角，阴影，渐变等。
3.新增了丰富的背景效果，例如：支持多个图片背景，同时新增了若干个背景元素的属性。
4.新增了全新的布局方案—弹性盒子。
5.新增了web字体，可以显示用户电脑上没有安装的字体
6.增强了颜色，例如：HSL，HSLA，RGBA几种新的颜色模式，新增opacity属性来控制透明度。
7.增加了2D和3D变换，例如：旋转，扭曲，缩放，位移等。
8.增加动画和过渡效果，让效果的变换更具流线性，平滑性。
。。。。等等

css3私有前缀

查询css3兼容性的网站：https://caniuse.com/
常见浏览器私有前缀
Chrome 浏览器 -webkit-
Safari 浏览器 -webkit-
Firefox 浏览器 -moz-
Edge 浏览器 -webkit-
旧 Opera 浏览器 -o-
旧 IE 浏览器 -ms-

<style scoped>
 div{
    width:100px;
    height: 100px;
    -webkit-border-radius:10px;
    border-radius:10px;
 }
</style>

注意：我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的css3新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具比如：webpack，去帮我们添加私有前缀。

css3新增长度单位

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

新增盒子属性 border-box

resize(了解)
box-shadow 盒子阴影 （写4个值的比较常用）
opacity 不透明度（0~1）

opacity与rgba（区别）
opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

<template>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</template>
<style scoped>
.box1{
    width: 100px;
    height: 100px;
    background-color: rgb(225, 225, 245);
    padding: 5px;
    border: 5px solid black;
    /* 默认值 写与不写一样 */
    box-sizing: content-box;
    /* horizontal水平方向可以调  vertical垂直方向可以调  both水平和垂直都可以调 默认值是none resize前提必须配合overflow来使用 */
    resize: both;
    overflow: hidden;
    opacity: 0.2;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: rgb(225, 225, 245);
    padding: 5px;
    border: 5px solid rgba(211, 25, 25, 0.5);
    box-sizing: border-box;
    margin: auto;
    /* 阴影 第一种 写2个值  含义：水平位置阴影 垂直位置阴影*/
    /* box-shadow: 10px 10px; */
    /* 阴影 第二种 写3个值  含义：水平位置阴影 垂直位置阴影 阴影的颜色*/
    /* box-shadow: 10px 10px blue; */
    /* 阴影 第三种 写3个值  含义：水平位置阴影 垂直位置阴影 模糊程度*/
    /* box-shadow: 10px 10px 10px; */
    /* 阴影 第四种 写4个值  含义：水平位置阴影 垂直位置阴影 模糊程度 阴影的颜色*/
    /* box-shadow: 10px 10px 10px blue; */
    /* 阴影 第五种 写5个值  含义：水平位置阴影 垂直位置阴影 模糊程度 外延值 阴影的颜色*/
    /* box-shadow: -10px -10px 10px 10px blue; */
    /* 阴影 第六种 写6个值  含义：水平位置阴影 垂直位置阴影 模糊程度 外延值 阴影的颜色 内阴影*/
    /* box-shadow: -10px -10px 10px 10px blue inset; */
    /* 阴影 第七种和第四种情况一样 只是加了一个内阴影 其实就是4个值 写5个值  含义：水平位置阴影 垂直位置阴影 模糊程度 阴影的颜色 内阴影*/
    box-shadow: 0px 0px 10px blue inset;
}
</style>

新增背景属性 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>

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>

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>

background复合属性

<template>
    <div>
        <div class="box1"></div>
    </div>
</template>
<style scoped>
.box1{
    width: 200px;
    height: 200px;
    margin: auto;
    border: 1px solid red;
    /* 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式*/
    /* 大小的值必须写在位置值的后面，并且用/分开 */
    background:skyblue url('../assets/images/bg.png') no-repeat 10px 10px / 100px 100px border-box content-box;
}
</style>

多背景图background

<template>
    <div>
        <div class="box1"></div>
    </div>
</template>
<style scoped>
.box1{
    width: 400px;
    height: 400px;
    margin: auto;
    border: 1px solid red;
    /* 小图最能看出效果 */
    background: url('../assets/images/lt.png') no-repeat left top,
                url('../assets/images/rt.png') no-repeat right top,
                url('../assets/images/lb.png') no-repeat left bottom,
                url('../assets/images/rb.png') no-repeat right bottom;
}
</style>

边框圆角border

<template>
    <div>
        <div class="box1"></div>
    </div>
</template>
<style scoped>
.box1{
    width: 400px;
    height: 400px;
    margin: auto;
    border: 2px solid red;
    /*border-radius属性 一个值  正圆 200px 容器的一半  或者 50% */
    /* 正圆圆角 */
    /* border-top-left-radius: 30px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 10px; */
    /* 椭圆圆角 */
    /* border-top-left-radius:30px  60px; */
    /* 复合属性 */
    border-radius:100px 50px 20px 10px / 50px 20px 10px 5px;
}
</style>

边框外轮廓outline

<template>
    <div>
        <div class="box1"></div>
    </div>
</template>
<style scoped>
.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>

文本阴影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>

文本换行white-space

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

文本溢出text-overflow

<template>
    <div>
          <ul>
            <li>一境界的人像摄影作品,除了对摄影师本身的素质提出要求之外,还依赖于一些客观因</li>
            <li>美丽大自然,美景似天堂 7分钟前 相关推</li>
            <li>是该市的标志,也是世界最闻名</li>
          </ul>
    </div>
</template>
<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>

文本修饰text-decoration

<template>
  <div>
        发圣诞节快乐
        迦拉克隆看就看
  </div>
</template>
<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>

文本描边text-stroke

<template>
  <div>
    <h1>发圣诞节快乐迦拉克隆看就看</h1>
  </div>
</template>
<style scoped>
h1{
 font-size: 80px;
 /* -webkit-text-stroke-color: red;
 -webkit-text-stroke-width: 3px; */
 /* 宽度 颜色 */
 -webkit-text-stroke: 3px red;
 color: transparent;
}
</style>

新增渐变

线性渐变 linear-gradient
文字渐变

<template>
  <div>
    <div class="box"></div>
    <div class="box1">你好</div>
  </div>
</template>
<style scoped>
.box{
 width: 200px;
 height: 200px;
 border: 1px solid black;
 /*linear-gradient线性渐变 默认从上往下  */
 /* background-image: linear-gradient(red,yellow,green,blue,black); */
 /* 从左往右to right   从右往左 to left */
 /* background-image: linear-gradient(to left, red,yellow,green); */
  /* 从右上角 to right top */
  /* background-image: linear-gradient(to right top, red,yellow,green); */
  /* 从20度角  20deg  整个界面的20度角 顺时针  最右边是0度开始 */
  /* background-image: linear-gradient(20deg, red,yellow,green); */
  /* 渐变的位置 */
  /* background-image: linear-gradient( red 50px,yellow 100px,green 150px); */
  background-image: linear-gradient(45deg, red 50px,yellow 100px,green 150px);
}
/* 文字渐变 */
.box1{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-image: linear-gradient(45deg, red 50px,yellow 100px,green 150px);
  font-size: 80px;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
</style>

径向渐变radial-gradient

<template>
  <div>
    <div class="box"></div>
  </div>
</template>
<style scoped>
.box{
 width: 200px;
 height: 200px;
 border: 1px solid black;
 /* 径向渐变radial-gradient 默认从里像外*/
 /* background-image: radial-gradient( red,yellow,green); */
 /* 设置渐变圆心 at left top 左上角   at 100px 50px 设置圆心*/
 /* background-image: radial-gradient(at left top, red,yellow,green); */
 /* background-image: radial-gradient(at 100px 50px, red,yellow,green); */
 /* circle调整渐变为正圆 */
 /* background-image: radial-gradient(circle, red,yellow,green); */
 /* 正圆 椭圆数值不一样就可以 */
 /* background-image: radial-gradient(100px 100px, red,yellow,green); */
 /* background-image: radial-gradient( red 50px,yellow 100px,green 150px); */
 /* 100px 50px是否椭圆  at 150px 150px圆心的位置  综合写法 */
 background-image: radial-gradient(100px 50px at 150px 150px, red 50px,yellow 100px,green 150px);
}
</style>

重复渐变 repeating-xxx-gradient

在没有发生渐变的区域，重新开始渐变，就是重复渐变

<template>
  <div>
    <div class="box"></div>
  </div>
</template>
<style scoped>
.box{
 width: 200px;
 height: 200px;
 border: 1px solid black;
 /* 重复线性渐变repeating-linear-gradient */
 /* background-image:repeating-linear-gradient(red 50px,yellow 100px,green 150px); */
 /* 重复径向渐变repeating-radial-gradient */
 background-image:repeating-radial-gradient(red 50px,yellow 100px,green 150px);
}
</style>

web字体 font-family

https://www.iconfont.cn/webfont#!/webfont/index 阿里定制字体 体积小 本地下载 引入所有解压的文件 不包括html文件
https://www.iconfont.cn/ 可以定制图片图标 把需要的图标下载本地 有说明html文件文档 按步骤操作就可以

<template>
  <div>
    <h1 class="web-font">大姐夫凉快是凉快</h1>
  </div>
</template>
<style scoped>
@font-face {
    font-family: '哈哈嘻嘻';
    font-display: swap;
    src: url('../font/webfont.eot'); /* IE9 */
    src: url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/webfont.woff2') format('woff2'),
    url('../font/webfont.woff') format('woff'), /* chrome、firefox */
    url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
h1{
 font-size: 30px;
 /* font-family: '隶书'; */
 font-family: '哈哈嘻嘻';
}
</style>

2d变换 transform

translate 位移
1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素
2.与相对定位的区别：相对定位的百分值，参考的是其父元素，定位的百分比值，参考的是其自身
3.浏览器针对位移有优先，与定位相比，浏览器处理位移的效率更高
4.位移对行内元素无效
5.位移配合定位，可实现元素水平垂直居中

<template>
  <div class="outer">
       <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 100px;
  /* transform变换 位移translateX  X方向位移100px  50%是自己的50&*/
  /* translateY  Y方向位移 */
  /* transform: translateX(50%); */
  /* 水平+垂直位移 */
  /* transform: translateX(50px) translateY(50px); */
  transform: translate(50px,50px);
}
.outer1{
  position: absolute;
  background: blue;
  height: 50px;
  width: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
</style>

缩放 scale

<template>
  <div class="outer">
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 100px;
  /* scaleX X轴缩放0.5倍  scaleY Y轴缩放0.5倍*/
  /* transform: scaleY(0.5); */
  /* transform: scaleX(0.5) scaleY(0.5); */
  /* X方向和 Y方向都缩放了 */
  transform: scale(0.5);
}
</style>

旋转 rotate

<template>
  <div class="outer">
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 100px;
  /* 旋转 rotateZ Z轴旋转 适合我们视觉的肉眼效果 可以看出效果来*/
  /* transform: rotateZ(45deg); */
  /*rotate写一个值就是2D旋转 Z轴旋转 顺时针旋转 */
  transform: rotate(45deg);
}
</style>

扭曲（了解）skew

<template>
  <div class="outer">
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 100px;
  /* 扭曲 skewX 逆时针旋转方向 左上角 右下角拉扯*/
  /* transform: skewX(30deg); */
   /* 扭曲 skewY*/
   /* transform: skewY(30deg); */
   /* transform: skewX(30deg) skewY(30deg); */
   /* 一个值代码skewX  两个值代码skewX skewY */
   transform:skew(30deg,30deg);
}
</style>

多重变换
注意:多重变换时，建议最后旋转

<template>
  <div class="outer">
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 100px;
  /* transform:translate(100px,100px) scale(0.5);  */
  transform:translate(100px,100px) rotate(30deg);
}
</style>

变换原点 transform-origin

如果只提供一个值，若是像素值，表示横坐标，纵坐标取50%。若是关键词，则另一个坐标取50%

<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>

3D变换

1.开启3D空间 transform-style
重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间
2.设置景深 perspective
何为景深：指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更加立体

透视点的位置 perspective-origin

所谓透视点位置，就是观察者位置，默认的透视点在元素的中心，
注意：通常情况下，我们不需要跳转透视点位置

<template>
  <div class="outer">
    <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: auto;
  margin-top: 100px;
  /*1. 父元素需要开启3D空间 */
  transform-style: preserve-3d;
  /*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
  perspective: 500px;
  /* 设置透视点的位置 默认是元素的一半 就是102px*/
  perspective-origin: 102px 102px;
}
.outer1{
  width: 200px;
  height: 200px;
  background: red;
  /* 3.变换3D */
  transform: rotateX(30deg);
}
</style>

位移 translate3d

<template>
  <div class="outer">
    <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: auto;
  margin-top: 100px;
  /*1. 父元素需要开启3D空间 */
  transform-style: preserve-3d;
  /*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
  perspective: 500px;
  /* 设置透视点的位置 默认是元素的一半 就是102px*/
  perspective-origin: 102px 102px;
}
.outer1{
  width: 200px;
  height: 200px;
  background: rgba(212, 115, 115,0.5);
  /* 3.变换3D translateZ  只能写像素值 不能写百分比 位移*/
  /* transform: translateZ(200px); */
  /*translate3d 第一个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略 */
  transform: translate3d(100px,100px,0px);
}
</style>

旋转 rotate3d

<template>
  <div class="outer">
    <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: auto;
  margin-top: 100px;
  /*1. 父元素需要开启3D空间 */
  transform-style: preserve-3d;
  /*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
  perspective: 500px;
  /* 设置透视点的位置 默认是元素的一半 就是102px*/
  perspective-origin: 102px 102px;
}
.outer1{
  width: 200px;
  height: 200px;
  background: rgba(212, 115, 115,0.5);
  /* 3.变换3D rotateX  旋转*/
  /* transform: rotateX(45deg); */
  /* rotate3d前3个参数分别表示坐标轴：x,y,z，第4个参数表示旋转的角度，参数不允许省略 */
  transform: rotate3d(1,0,0,30deg);
}
</style>

缩放 scale3d

<template>
  <div class="outer">
    <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: auto;
  margin-top: 100px;
  /*1. 父元素需要开启3D空间 */
  transform-style: preserve-3d;
  /*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
  perspective: 500px;
  /* 设置透视点的位置 默认是元素的一半 就是102px*/
  perspective-origin: 102px 102px;
}
.outer1{
  width: 200px;
  height: 200px;
  background: rgba(212, 115, 115,0.5);
  /* 3.变换3D scaleX  缩放*/
  /* transform: scaleX(0.5); */
  /* transform: scaleZ(2) rotateY(45deg); */
  /* scale3d第一个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。 */
  transform: scale3d(1.5,1.5,1) rotateY(45deg);
}
</style>

多重变换
注意点：多重变换时，建议最后旋转

<template>
  <div class="outer">
    <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: auto;
  margin-top: 100px;
  /*1. 父元素需要开启3D空间 */
  transform-style: preserve-3d;
  /*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
  perspective: 500px;
  /* 设置透视点的位置 默认是元素的一半 就是102px*/
  perspective-origin: 102px 102px;
}
.outer1{
  width: 200px;
  height: 200px;
  background: rgba(212, 115, 115,0.5);
  /* 3.变换3D 多重变换*/
  /* 变换原点 */
  /* transform-origin: 202px 0px;
  transform: rotateY(-45deg); */
  transform: translateZ(100px) scaleZ(2) rotateY(45deg);
}
</style>

背部可见性 backface-visibility

<template>
  <div class="outer">
    <div class="outer1"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: auto;
  margin-top: 100px;
  /*1. 父元素需要开启3D空间 */
  transform-style: preserve-3d;
  /*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
  perspective: 500px;
  /* 设置透视点的位置 默认是元素的一半 就是102px*/
  perspective-origin: 102px 102px;
}
.outer1{
  width: 200px;
  height: 200px;
  background: rgba(212, 115, 115,1);
  /* 3.变换3D*/
  transform: rotateY(130deg);
  /* 背部可见性 hidden超过90度 不可见了 默认是visible */
  backface-visibility: hidden;
}
</style>

过渡 transition

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡，
常见的支持过渡的属性有：颜色，长度值，百分比，z-index, opacity , 2D变换属性，3D变换属性，阴影。
过渡属性建议 放在容器身上 不要放在 :hover 身上 过渡需要触发条件

<template>
  <div class="outer">
  </div>
</template>
<style scoped>
.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>

高级使用—— 贝塞尔曲线

过渡 https://cubic-bezier.com/

<template>
  <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>
</template>
<style scoped>
.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>

复合属性

<template>
  <div class="outer">
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.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>

动画

不需要触发条件
第一步：定义关键帧（定义动画）
@keyframes 动画名
第二步：给元素应用动画，用到的属性如下：
animation-name:给元素指定具体的动画（具体的关键帧）
animation-duration:设置动画所需时间
animation-delay:设置动画延迟

<template>
  <div class="outer">
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 1000px;
  height: 100px;
  border:1px solid black;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: aqua;
  /* 应用动画到元素  动画名称 自定义*/
  animation-name: haha2;
  /* 动画持续的时间 */
  animation-duration: 3s;
  /* 动画延迟时间 */
  animation-delay: 0.5s;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
  /* 第一帧 */
  form {
   
  }
  /* 最后一帧 */
  to {
    transform: translate(900px);
    background-color: red;
  }
}
/* 定义一个动画（定义一组关键帧） 第二种方式*/
@keyframes haha2{
  /* 第一帧 */
  0% {
   
  }
  29% {
    background-color: blueviolet;
  }
  48% {
    background-color: rgb(104, 77, 36);
  }
  88% {
    background-color: rgb(66, 205, 122);
  }
  /* 最后一帧 */
  100% {
    transform: translate(900px) rotate(360deg);
    background-color: rgb(176, 227, 33);
    border-radius: 50%;
  }
}
</style>

其他属性
暂停 动作往往写在一个动作里面比如 :hover

<template>
  <div class="outer">
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 1000px;
  height: 100px;
  border:1px solid black;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: aqua;
  /* 应用动画到元素  动画名称 自定义*/
  animation-name: haha;
  /* 动画持续的时间 */
  animation-duration: 3s;
  /* 动画延迟时间 */
  animation-delay: 0.2s;
  /* 其他属性  设置动画的方式*/
  animation-timing-function: linear;
  /* 动画播放的次数 2  表示两次  infinite表示无限循环*/
  animation-iteration-count: infinite;
  /* 动画的方向  默认值是normal  reverse反转  alternate往复运动  alternate-reverse交替的反方向运动*/
  animation-direction: alternate;
  /* 动画以外的状态（不发生动画的时候在哪里） */
  /* forwards最后一帧在哪里  backwards初始第一帧在哪里*/
  /* animation-fill-mode: backwards; */
  /* 动画的播放状态 */
  /* paused暂停  默认是运动running*/
  /* animation-play-state: paused; */
}
.outer:hover .inner{
  /* 动画的播放状态 */
  /* paused暂停  默认是运动running*/
  animation-play-state: paused;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
  /* 第一帧 */
  form {
   
  }
  /* 最后一帧 */
  to {
    transform: translate(900px) rotate(360deg);
    background-color: rgb(176, 227, 33);
    border-radius: 50%;
  }
}
</style>

动画的复合属性

只设置一个时间表示duration,设置两个时间分别是：duration和delay,其他属性没有数量和顺序要求
备注：animation-play-state 一般单独使用。

<template>
  <div class="outer">
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 1000px;
  height: 100px;
  border:1px solid black;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: aqua;
  animation: haha 3s 0.5s linear 2 alternate-reverse forwards;
}
.outer:hover .inner{
  /* 动画的播放状态 */
  /* paused暂停 默认是运动running*/
  animation-play-state: paused;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
  /* 第一帧 */
  form {
   
  }
  /* 最后一帧 */
  to {
    transform: translate(900px) rotate(360deg);
    background-color: rgb(176, 227, 33);
    border-radius: 50%;
  }
}
</style>

动画与过渡的区别

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

图片动画

注意事项：
1.需要有一个像样的图
2.算好位置以及它走多少步数

<template>
  <div class="outer">
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 180px;
  /* 背景图片长度1600 高度180  有8个动画帧 */
  background-image: url('../assets/images/bj.png');
  margin: auto;
  margin-top: 100px;
  /* 需要背景图片以动画帧的效果播放 有8个动画帧这里设置为 steps(8) */
  animation: haha 0.5s steps(8) infinite;
}

/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
  /* 第一帧 */
  form {
   
  }
  /* 最后一帧 */
  to {
    /* 最后一帧位置  */
    background-position: -1600px 0px;
  }
}
</style>

多列布局 column

多列图片
作用：专门用于实现类似于报纸的布局

<template>
  <div class="outer">
     <h1>干苦力节流防抖</h1>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
    <img src="../assets/images/pak.png">
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
     <p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
  </div>
</template>
<style scoped>
h1{
 /* 指定是否跨列 */
  column-span: all;
  text-align: center;
  font-size: 50px;
}
img{
  width: 100%;
}
.outer{
  width: 1000px;
  margin: 0 auto;
  /* 多列布局 自动分成多少列 */
  /* 直接指定列数 */
  /* column-count: 3; */
  /* 指定每一列的宽度，会自动计算列数 */
  /* column-width: 220px; */
  /* 复合属性：能同时指定列宽和列数（不推荐使用） */
  /* columns: 3 220px; */
  columns: 4;
  /* 调整列间距 */
  column-gap: 20px;
  /* 每一列边框的宽度 */
  /* column-rule-width: 2px; */
   /* 每一列边框的风格 */
 /* column-rule-style: dashed; */
  /* 每一列边框的颜色 */
 /* column-rule-color: red; */
 /* 边框相关的复合属性 */
  column-rule: 2px dashed red;
}
</style>

伸缩容器（弹性盒子） display:flex

伸缩项目：伸缩容器所有 子元素 自动成为了：伸缩项目。

<template>
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 1000px;
  height: 300px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
</style>

主轴方向 flex-direction

<template>
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 600px;
  height: 600px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: column-reverse;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
</style>

主轴换行方式 flex-wrap

<template>
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 200px;
  height: 300px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  flex-wrap: wrap;
  /* 复合属性（了解就可以） */
  /* flex-flow: row wrap; */
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
</style>

主轴对齐方式 justify-content

<template>
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</template>
<style scoped>
.outer{
  width: 500px;
  height: 300px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  flex-wrap: wrap;
  /* 主轴的对齐方式 默认值主轴的起始位置 flex-start  主轴的结束位置 flex-end 居中 center*/
  /* justify-content: center; */
  /* 主轴的对齐方式 ,项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
  /* justify-content: space-around; */
  /* 主轴的对齐方式 ,项目均匀的分布在一行中，项目与项目之间的距离是相等的，是项目距边缘没有距离 */
  justify-content: space-between;
  /* 主轴的对齐方式 ,项目均匀的分布在一行中 */
  /* justify-content: space-evenly; */
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
</style>

侧轴对齐方式__一行 align-items

<template>
  <div class="outer">
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner inner3">x</div>
  </div>
</template>
<style scoped>
.outer{
  width: 500px;
  height: 300px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  flex-wrap: wrap;
  /* 侧轴的对齐方式 侧轴的起始位置对齐flex-start  侧轴的结束位置对齐flex-end  侧轴的中间位置对齐center  baseline基线对齐（文字）*/
  /* stretch拉伸到整个父容器（前提：伸缩项目不能给高度），默认值  */
  align-items: baseline;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
.inner2{
  height: 200px;
  font-size: 80px;
}
.inner3{
  height: 50px;
}
</style>

侧轴对齐方式__多行 align-content

<template>
  <div class="outer">
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner inner3">x</div>
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner inner3">x</div>
  </div>
</template>
<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  flex-wrap: wrap;
  /* 侧轴的对齐方式(多行) 侧轴的起始位置对齐flex-start 侧轴的结束位置对齐flex-end 中间对齐center*/
  /* align-content: center; */
  /* 侧轴的对齐方式(多行) 伸缩项目之间的距离是相等的，且是边缘距离的二倍  */
  /* align-content: space-around; */
  /* 侧轴的对齐方式(多行) 伸缩项目之间的距离是相等的，且是边缘没距离 */
  /* align-content: space-between; */
  /* 侧轴的对齐方式(多行) 伸缩项目之间的距离是相等的 */
  /* align-content: space-evenly; */
  /* 侧轴的对齐方式(多行) stretch（前提：伸缩项目不能给高度） 拉伸 默认值 */
  align-content: flex-start;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
.inner2{
  height: 150px;
  font-size: 80px;
}
.inner3{
  height: 50px;
}
</style>

项目在主轴的基准长度 flex-basis

<template>
  <div class="outer">
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner">x</div>
   
  </div>
</template>
<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  flex-wrap: wrap;
 
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
.inner2{
  /* 设置伸缩项目在主轴上的基准长度 若主轴是横向的宽失效，若主轴是纵向的高失效 （了解即可）默认是auto*/
  flex-basis: 300px;
}
</style>

伸缩项目__伸 flex-grow

<template>
  <div class="outer">
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner">x</div>
   
  </div>
</template>
<style scoped>
.outer{
  width: 600px;
  height: 400px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  flex-wrap: wrap;
 
}
.inner{
  width: 100px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
  /* 拉伸 默认0 若所有伸缩项目的值都为1，它们将等分剩余空间（如果有空间的话）*/
  flex-grow: 1;
}
.inner2{
  width: 200px;
}
</style>

伸缩项目__缩 flex-shrink

<template>
  <div class="outer">
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner">x</div>
   
  </div>
</template>
<style scoped>
.outer{
  width: 600px;
  height: 400px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  /* flex-wrap: wrap; */
 
}
.inner{
  width: 300px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
  /* 压缩 默认值就是1 可以不写*/
  /* 如果空间不足，该项目将会缩小 */
  flex-shrink: 1;
}
.inner2{
  width: 200px;
}
</style>

复合属性 flex

<template>
  <div class="outer">
    <div class="inner">x</div>
    <div class="inner inner2">x</div>
    <div class="inner">x</div>
   
  </div>
</template>
<style scoped>
.outer{
  width: 800px;
  height: 400px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  /* flex-wrap: wrap; */
 
}
.inner{
  width: 200px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
  /* 拉伸 默认0 若所有伸缩项目的值都为1，它们将等分剩余空间（如果有空间的话）*/
  /* flex-grow: 1; */
  /* 压缩 默认值就是1 可以不写*/
  /* 如果空间不足，该项目将会缩小 */
  /* flex-shrink: 1; */
  /* 基准长度 */
  /* flex-basis: 100px; */
  /* 复合属性 上面三个可以写一起 */
  /* 可以拉伸 可以压缩 不设置基准长度 可简写为：flex:auto */
  /* flex: 1 1 auto; */
  /* 可以拉伸 可以压缩 设置基准长度0 可简写为：flex:1*/
  /* flex:1 1 0; */
  /* 不可以拉伸 不可以压缩 不设置基准长度 可简写为：flex:none*/
  /* flex: 0 0 auto; */
  /* 不可以拉伸 可以压缩 不设置基准长度 默认值 可简写为：flex:0 auto*/
  flex: 0 1 auto;
}
.inner2{
  width: 150px;
}
</style>

项目排序与单独对齐 order align-self

<template>
  <div class="outer">
    <div class="inner inner1">1x</div>
    <div class="inner inner2">2x</div>
    <div class="inner inner3">3x</div>
  </div>
</template>
<style scoped>
.outer{
  width: 800px;
  height: 400px;
  background-color: rgb(205, 212, 212);
  /* 将该元素变为了伸缩容器（开启了flex布局） */
  display: flex;
  /* 伸缩盒模型相关属性 */
  /* 调整主轴方向 默认是从左到右row   从右到左 row-reverse  从上到下column  从下到上column-reverse*/
  flex-direction: row;
  /* 主轴换行方式 默认不换行nowrap   换行wrap   反向换行wrap-reverse */
  /* flex-wrap: wrap; */
 
}
.inner{
  width: 200px;
  height: 100px;
  background-color: rgb(124, 204, 229);
  border: 1px solid black;
  box-sizing: border-box;
}
.inner1{
  /* 默认值是0 值越小排前面*/
  order: 3;
}
.inner2{
  order: 5;
  /* 单独对齐 */
  align-self: center;
}
.inner3{
  order: -4;
}
</style>

响应式布局

媒体查询__媒体特性 @media

<template>
  <div>
      <h1>你好</h1>
  </div>
</template>
<style scoped>
  h1{
    font-size: 80px;
    text-align: center;
    height: 400px;
    width: 600px;
    background-color: aqua;
  }
  /* 只有在打印机或打印预览才应用的样式 */
  @media print {
    h1{
      background: yellow;
    }
  }
   /* 只有在屏幕上才应用的样式 */
   @media screen {
    h1{
      font-family: '隶书';
    }
  }
    /* 一直都应用的样式 */
    @media all {
    h1{
      color: red;
    }
  }
</style>

媒体查询__媒体类型

<template>
  <div>
      <h1>你好</h1>
  </div>
</template>
<style scoped>
  h1{
    font-size: 80px;
    text-align: center;
    height: 200px;
    background-color: aqua;
  }
  /* 检测到视口的宽度为800px时，应用如下样式 */
  @media (width:800px) {
    h1{
      background: yellow;
    }
  }
  /* 检测到视口的宽度小于等于700px时，应用如下样式 */
  @media (max-width:700px) {
      h1{
        background: rgb(32, 109, 225);
      }
    }
  /* 检测到视口的宽度大于等于900px时，应用如下样式 */
  @media (min-width:900px) {
      h1{
        background: rgb(237, 152, 164);
      }
    }
   /* 检测到视口的高度为800px时，应用如下样式 */
   @media (height:800px) {
      h1{
        background: rgb(47, 14, 213);
      }
    }
   /* 检测到设备屏幕宽度为1920px，应用如下样式 会覆盖上面的*/
   @media (device-width:1920px) {
      h1{
        background-image: linear-gradient(red,green)
      }
    }
  /* 检测视口的旋转方向（是否横屏），应用如下样式 会覆盖上面的*/
 
  /* landscape:视口处于横向，即宽度大于高度 */
  @media screen and  (orientation: landscape) {
  /* 当设备处于横屏模式时应用的样式 */
  h1 {
      background: lightgreen;
    }
  }
/* portrait:视口处于纵向，即高度大于等于宽度 */
  @media screen and  (orientation: portrait) {
    /* 当设备处于竖屏模式时应用的样式 */
    h1 {
      background: rgb(54, 126, 6);
    }
  }
</style>

媒体查询__运算符

<template>
  <div>
      <h1>你好</h1>
  </div>
</template>
<style scoped>
  h1{
    font-size: 80px;
    text-align: center;
    height: 200px;
    background-color: aqua;
  }
  /*且运算符  检测到视口的宽度为大于等于700 且 小于等于800px时，应用如下样式 */
  /*且运算符  (min-width:700px) and (max-width:800px) */
  @media screen and (min-width:700px) and (max-width:800px) {
    h1{
      background: yellow;
    }
  }
  /*或运算符  (max-width:700px),(min-width:800px) */
  /* (max-width:700px) or (min-width:800px) */
  /* 小于等于700 或大于等于800 */
  @media screen and (max-width:700px) or (min-width:800px) {
    h1{
      background: rgb(148, 119, 205);
    }
  }

  /* 否定运算符 不是屏幕*/
  @media not screen  {
    h1{
      background: rgb(119, 118, 119);
    }
  }

  /* 肯定运算符 是屏幕*/
  @media only screen  {
    h1{
      background: rgb(87, 40, 87);
    }
  }
 
</style>

媒体查询__常用阈值

<template>
  <div>
      <h1>你好</h1>
  </div>
</template>
<style scoped>
  h1{
    font-size: 80px;
    text-align: center;
    height: 200px;
    background-color: aqua;
  }
  /* 超小屏幕 */
  @media screen and (max-width:768px) {
    h1{
      background: yellow;
    }
  }
  /* 中等屏幕 */
  @media screen and (min-width:768px) and (max-width:992px) {
    h1{
      background: rgb(50, 184, 186);
    }
  }
  /* 大屏幕 */
  @media screen and (min-width:992px) and (max-width:1200px) {
    h1{
      background: rgb(85, 87, 87);
    }
  }
   /* 超大屏幕 */
   @media screen and (min-width:1200px)  {
    h1{
      background: rgb(113, 12, 34);
    }
  }
</style>
时光浅止
关注
CSS3新特性
qq_43276642的博客
05-20 3181
1.选择器： 伪元素选择器 ::before ::after ::first-line ::first-letter ::section 伪类选择器 .list>li:first-child 选中第一个子元素 .list>li:last-child 选中最后一个子元素 .list>li:nth-child(n) 选中第五个子元素 .list>li:nth-child(odd) 选中偶数行 .list>li:nth-child(...
CSS3教程和css3新特性专题
06-06
【CSS3教程和css3新特性专题】 CSS3是 Cascading Style Sheets（层叠样式表）的第三版，是Web设计领域的一个重要里程碑，引入了许多新的功能和特性，极大地增强了网页设计的灵活性和表现力。这个专题将深入探讨CSS3...
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
1.07 css3新特性
10-07
1.07 css3新特性
24个CSS新特性，不容错过！
最新发布
2401_87029603的博客
09-09 1657
上面的示例，我们是使用渐变来模拟的一个效果，但有了 @scroll-timeline 我们就可以像下面这样来实现：start: 0;end: 100%;width: 0px;
11.CSS3新增了哪些新特性？
kleinBlue.的博客
11-07 3107
一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 CSS3也增加了很多新特性，为开发者带来了更佳的开发体验 从几个维度列举一些常见的特性，如下 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆...
day7小结
KanaseKanon的博客
09-24 830
1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内
【css】CSS3有哪些新特性
热门推荐
t13965688123的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、css3边框——圆角效果 border-radius2、css3边框——阴影 box-shadow3、css3边框——边框图片 border-image4、css3颜色——颜色之RGBA5、css3颜色——渐变色彩 liner-gradient线性渐变6、CSS3文字与字体——text-overflow与word-wrap7、CSS3文字与字体——@font-face 字体8、CSS3文字与字体——文本的阴影 text-s.
css3新特性_web前端-css3新特性
weixin_39715926的博客
11-29 223
一、圆角定义使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。2、语法 CSS3 border-radius - 指定每个圆角 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。 但是，如果你要在四个角上一一指定，可以使用以下规则： （1）四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，...
CSS3 新特性有哪些
HIRAETHZY的博客
03-21 557
1.颜色： 新增 RGBA，HSLA 模式 2. 文字阴影： text-shadow 3.边框： 圆角：border-radius 边框阴影： box-shadow 4. 盒子模型： box-sizing 5.背景： background-size：设置背景图片的尺寸 background-origin ：设置背景图片的原点 background-clip： 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局 6.渐变： linear-gradient、radial-gradient 7.
Css3新特性应用之视觉效果实例
12-13
本文介绍了Css3新特性应用之视觉效果，具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果，具体实现如下： 一、单侧阴影 1、box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset...
CSS3有哪些新特性？
weixin_39491740的博客
03-13 191
1. CSS3实现圆角（border-radius），阴影（box-shadow），2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜4. 增加了更多的CS...
  CSS3有哪些新特性？
zhongheng310的博客
02-25 176
CSS3有哪些新特性？ 圆角（border-radius:8px） 多列布局（multi-columnlayout） 阴影和反射（Shadow\Reflect） 文字特效（text-shadow、） 文字渲染（Text-decoration） 线性渐变（gradient） 旋转（transform） 缩放,定位,倾斜,动画,多背景 ...
CSS3 新特性
开源 共享 学习
08-08 681
CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只控制样式的定义，让之前很难处理的样式（如：圆角、多列等）和只能通过Javascript来实现的动画效果等现在都能通过CSS3 新特性提供的属性很轻松的实现，功能是越来越强
css3新特性
weixin_44992737的博客
06-19 4942
css3新特性详解
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光浅止

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值