CSS3新特性_from number to 样式-CSDN博客

本文链接：https://blog.csdn.net/qq_43477251/article/details/119842949

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、经验

一、CSS3新增选择器

1、子级选择器

用于选取带有特定父元素的元素
书写语法：element1 > element2

.box > p {
            background-color: cyan;
        }

注：如果element2元素不是父元素element1的直接子元素，则不会被选择。

2、兄弟选择器

（1）相邻兄弟选择器

用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素
书写语法：element1+element2

h2 + p {
            background-color: royalblue;
        }

注：
a、选中的是紧跟在element1之后的同级元素element2
b、只能选中紧跟在后面的一个element2元素
c、二者有相同的父元素
d、+符号前后可以添加空格书写

（2）其他兄弟选择器

匹配同一个父元素中在element1后面的所有element2元素
书写语法：element1~element2

h2 ~ p {
            background-color: yellow;
        }

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

3、结构伪类选择器

选择器	简介
E:first-child	父元素中的第一个子元素是E则匹配，E也可不写
E:last-child	父元素中的最后一个子元素是E则匹配，E也可不写
E:nth-child(n)	父元素中的第n个子元素是E则匹配，E也可不写
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

（1）nth-child(n)

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

公式	取值
2n	偶数
2n+1	奇数
3n	3、6、9 ······
n+5	从第5个开始（包含第5个）到最后，5、6、7、8、9 ······
-n+5	前五个（包含第5个），5、4、3、2、1、0 ······

注：第0元素或者超出元素的个数会被忽略

（2）区别

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

4、伪元素选择器

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

注：

伪元素只能给双标签添加，不能给单标签添加
伪元素冒号前不能有空格
伪元素里面必须写上属性 content:" ";
before和after创建一个元素属于行内元素
在DOM里面看不到刚才创建的元素，所以叫伪元素

5、属性选择器

选择器	简介
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盒模型

通过box-sizing来指定盒模型

属性值	简介
content-box	默认值，标准盒子模型，盒模型是外扩的。width与height只包括内容的宽和高
border-box	怪异模式，盒模型是内减的。width与height包括内容、内边距和边框，不包括外边距

三、CSS3新增属性

1、常用属性

（1）边框圆角 border-radius

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

注：属性值为px或百分比，百分比参考的是盒子整体宽度、高度的百分比。

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            /* border-radius: 100px/50px; */
            /* 正圆 宽高为盒子一半 */
            /* 四个角相同 */
            /* border-radius: 130px; */
            /* border-bottom-right-radius: 130px; */
            /* border-bottom-left-radius: 130px; */
            /* border-top-right-radius: 130px; */
            /* border-top-left-radius: 130px; */
            /* 左上角 右上角 右下角 左下角 */
            /* border-radius: 10px 20px 30px 40px; */
            /* 左上角 右上角和左下角 右下角 / 左上角和右下角 右上角和左下角 */
            /* border-radius: 50px 100px 20px / 40px 60px; */
            border-radius: 50%;
            background-color: plum;
        }

注： IE8及以下浏览器不支持该属性

（2）文字阴影 text-shadow

属性值	简介
h-shadow	必需，水平阴影位置，允许负值
v-shadow	必需，垂直阴影位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

.word {
            margin: 50px;
            font: bold 30px/60px "微软雅黑";
            /* 文字阴影：水平位置正右负左 垂直位置正下负上 模糊程度 颜色 */
            /* text-shadow: 3px 3px 5px #f00; */
            /* 多层阴影 先写阴影压盖在后写阴影 */
            text-shadow: 3px 3px #f00,
            6px 6px #0f0,
            9px 9px #00f;
        }

（3）盒子阴影 box-shadow

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

.box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid #0ff;
            margin: 50px;
            background-color: plum;
            /* 边框阴影：水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 */
            /* 注：外部边框阴影不需要设置 默认的 */
            /* box-shadow: 20px 20px 5px 20px #f00 inset; */
            box-shadow: 20px 20px 5px #f00,
            40px 40px 5px #0f0,
            60px 60px 5px #00f;
        }

2、过渡属性 transition

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

属性	描述
transition	简写，一个属性中设置4个属性
transition-property	规定应用过渡的CSS属性的名称，none表示没有属性过渡；all表示所有变化的属性都过渡；属性名：使用具体的属性名，多个属性名中间逗号分隔
transition-duration	定义过渡效果花费的时间。默认是0。s秒为单位，0s必须加单位
transition-timing-function	规定过渡效果的时间曲线，默认是"ease"
transition-delay	规定过渡效果何时开始，默认是0。s秒为单位，0s必须加单位

transition-timing-function 时间曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果
cubic-bezier(x1,y1,x2,y2)	在cubic-bezier函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标

IE10、Firefox、Chrome以及Opera支持transition属性，Safari需要前缀-webkit-
注： IE9以及更早的版本，不支持transition属性

3、2D转换 transform

对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠flash才可以实现的效果

（1）位移 translate()

.box img {
			/* 水平和垂直方向位移的距离 */
            /* transform: translate(100px,50px); */
            /* 只有一个数值，表示水平方向的位移 */
            transform: translate(-100px);
        }

（2）缩放 scale()

.box img {
            /* 缩放 分别改变元素宽度和高度的倍数 */
            /* transform: scale(1.5,2); */
            /* 宽度高度同时缩放 */
            /* transform: scale(0.5); */
            /* 改元素宽度 */
            transform: scaleX(0.5);
            /* 改元素高度 */
            transform: scaleY(0.5);
        }

（3）旋转 rotate()

.box img {
            /* 旋转 正数顺时针 负数逆时针 */
            /* transform: rotate(30deg); */
            /* 先旋转后位移 */
            transform: rotate(30deg) translate(150px);
            /* 先位移后旋转 */
            transform: translate(150px) rotate(30deg);
        }

注：元素旋转后，坐标轴也跟着发生转变，transform书写顺序不同导致转换效果不同。

（4）倾斜 skew()

.box img {
            width: 316px;
            height: 170px;
            /* 倾斜 水平和垂直方向的倾斜角度 第二个值不写默认为0 */
            /* transform: skew(0,30deg); */
            transform: skew(30deg);
        }

（5）基准点 transform-origin

.box img {
            width: 316px;
            height: 170px;
            /* 设置基准点水平和垂直方向 */
            /* 水平：left、center、right、px、百分比 */
            /* 垂直：top、center、bottom、px、百分比 */
            transform-origin: left top;
            /* 旋转 */
            transform: rotate(30deg);
        }

4、3D转换

（1）透视 perspective

设置在z轴的视线焦点的观察位置，将一个2D平面在转换过程中呈现3D效果，属性值大观察点距离z轴原点越远
特点：近大远小
注：透视属性需要设置给3D变化元素的父级

.box {
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 150px auto;
            /* 透视 */
            perspective: 500px;
        }
        .box img {
            transition: all 1s ease;
        }
        .box img:hover {
            /* 延x轴进行旋转 */
            /* transform: rotateX(60deg); */
            /* 延y轴进行旋转 */
            /* transform: rotateY(-60deg); */
            /* 延z轴进行旋转 */
            /* transform: rotateZ(-60deg); */
            /* 延x轴进行位移 */
            /* transform: translateX(200px); */
            /* 延y轴进行位移 */
            /* transform: translateY(-200px); */
            /* 延z轴进行位移 */
            /* transform: translateZ(200px); */
            /* 旋转和位移可以同时设置。但是顺序不同，导致效果也有差异 */
            transform: translateX(200px) rotateY(60deg);
        }

（2）transform-style

用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
注：一般设置给3D变换图形的父级元素。IE10、Firefox以及Opera支持transform属性，Chrome和Safari需要前缀-webkit-，IE9需要前缀-ms-。

.stage {
			position: relative;
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			/* 设置内部子元素在3D空间进行展示 flat所有子元素在2D平面呈现 */
			transform-style: preserve-3d;
			/* 透视 找到z轴 查看3D效果 */
			perspective: 5000px;
			/* 过渡 */
			transition: all 4s ease;
		}

5、动画

（1）@keyframes规则

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

（2）animation

将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果

.box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 200px auto;
            background-color: skyblue;
            /* 添加绑定动画 动画名称 过渡时间 速度曲线 动画次数 延时时间 前两个必须设置 */
            /* animation: move 1s linear 3 2s; */
            animation: move2 3s linear infinite;
        }
        /* 自定义动画 过程 */
        @keyframes move {
            /* 从头开始，最好保持跟默认样式的状态一致 */
            from {
                transform: translateY(0);
            }
            /* 到结束位置 */
            to {
                transform: translateY(150px);
            }
        }
        /* 百分比定义动画细节 */
        @keyframes move2 {
            0% {
                transform: translateY(0); 
            }
            25% {
                transform: translateY(150px);
            }
            50% {
                transform: translateY(0px);
            }
            75% {
                transform: translateY(-150px);
            }
            100% {
                transform: translateY(0px);
            }

单一属性

属性	描述
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以及更早版本不支持。