CSS3新特性

最新推荐文章于 2025-04-09 21:00:00 发布

X可乐

最新推荐文章于 2025-04-09 21:00:00 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/108996449

CSS3 新增子级选择器

CSS3中，相对于CSS2.1版本的7个选择器（4个基础选择器，3个高级选择器），增加了更多其他的选择器，实现了更多的选择方式

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

div > p {
    color: red;
}

CSS3 新增兄弟选择器

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

相邻兄弟选择器

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

h1 + p {
    color: red;
}

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在E1后面的所有E2元素
书写语法：E1 ~ E2
- 选择E1之后出现的所有的E2
- 两种元素必须拥有相同的父元素，但是E2不必直接紧随E1

h2 ~ p {
    color: red;
}

CSS3 新增结构伪类选择器一

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

<style>
    .box :first-child {
        background-color: rgb(255, 0, 0);
    }
    .box :last-child {
        background-color: rgb(55, 0, 255);
    }
    .box :nth-child(2) {
        background-color: rgb(0, 255, 55);
    }
</style>

<body>
    <div class="box">
        <h1>一级标题</h1>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
</body>

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

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

CSS3 新增结构为类选择器二

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

CSS3 新增伪元素选择器

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

H5写法和传统写法的区别

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

伪元素的注意事项

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

CSS3 新增属性选择器

选择器	介绍
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元素

input[name] {
    color: red;
}

input[type="checkbox"] {
    color: red;
}

input[type^="check"] {
    color: red;
}

input[class^="icon"] {
    color: red;
}

input[class$="dan"] {
    color: red;
}

input[class*="on"] {
    color: red;
}

选择器权重

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

CSS3 盒模型

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

属性值	简介
content-box	默认值，标准盒子模型，盒模型是外扩的。width与height只包含内容的宽和高。在width和height之外绘制元素的内边距和边框。
border-box	guaiyimoshi1，盒模型是内减的。width和height属性包括内容，内边距和边框，但不包含外边距。为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。

content-box标准模式

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

.box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 10px solid blue;
    box-sizing: content-box;
}

border-box怪异模式

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

.box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 10px solid blue;
    box-sizing: border-box;
}

CSS3 边框圆角属性

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

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

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    /* border-radius: 100px/50px; */
    border-radius: 100px;
}

单一属性

border-top-left-radius:半径；
border-top-right-radius:半径；
border-bottom-right-radius:半径；
border-bottom-left-radius:半径；

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-bottom-right-radius:50px;
}

简写方法

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

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    /* border-radius:50px 40px 30px 20px; */
    /* border-radius:50px 40px 30px; */
    /* border-radius:50px 40px; */
    border-radius:50px;
}

/的属性值写法

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

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius:50% 20% 40% / 20% 30%;
}

浏览器兼容

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

CSS3 文字阴影

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

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

文字阴影语法

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

.word {
    font: bold 20px/60px "微软雅黑";
    text-shadow: 3px 3px 5px #f00;
}

多层阴影

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

.word {
    font: bold 20px/60px "微软雅黑";
    text-shadow: 3px 3px #f00,
    6px 6px #0f0,
    9px 9px #00f;
}

CSS3 盒子阴影

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

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

边框阴影语法

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

.box {
    bos-shadow: 20px 20px 5px 20px #f00 inset;
}

多层阴影

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

.box {
    box-shadow: 30px 30px #f00,
    50px 50px #0f0,
    70px 70px #00f;
}

CSS3 过渡属性

动画效果

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

过渡属性

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

单一属性写法

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的CSS属性的名称
transition-duration	定义过渡效果花费的时间。默认是0
transition-timing-function	规定过渡效果的时间曲线。默认是“ease”
transition-delay	规定过渡效果何时开始。默认是0

transition-property — 过渡的属性
- none：表示没有属性过渡
- all：表示所有变化的属性都过渡
- 属性名：使用具体的属性名，多个属性名之间逗号分隔
时间
- 过渡时间：以s秒为单位。
- 延时时间：以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取值任意，四个数值表示拉扯的点的两个坐标

.box {
    width: 100px;
    height:100px;
    background-color: red;
    /* transtion: all 2s linear 0s; */
    /* transtion: all 2s ease 0s; */
    transtion: all 2s ease-in 0s;
}
.box:hover {
    width: 300px;
}

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

2D 转换-位移

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

值	说明
translate(x,y)	x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负数
translate(x)	只有一个数值，表示水平方向的位移

.box {
    transform: translate(10,20)
}

2D 转换-缩放

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

值	说明
scale(x,y)	x,y分别为改变元素的宽度和高度的倍数
scale(n)	只有一个数值，表示宽度和高度同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

.box {
    /* transform: scale(1.5, 2) */
    /* transform: scale(1.5) */
    /* transform: scaleX(1.5) */
    transform: scaleY(1.5)
}

2D 转换-旋转

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

.box {
    /* transorm: rotate(30deg) */
    transorm: rotate(-30deg)
}

2D 转换-倾斜

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

.box {
    /* transform: skew(30deg) */
    /* transform: skew(-30deg) */
    /* transform: skew(0, 30deg) */
    transform: skew(0, -30deg)
}

2D 转换-基准点

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

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

.box {
    transform-origin: left top;
}

2D 转换-卡包特效案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 225px;
      height: 150px;
      border: 1px solid #000;
      margin: 300px auto;
    }

    .box img {
      position: absolute;
      left: 0;
      top: 0;
      width: 225px;
      height: 150px;
      /* 设置公共的基准点 */
      transform-origin: right top;
      /* 过渡 */
      transition: all 1s ease;
    }

    .box:hover img:nth-child(1) {
      transform: rotate(60deg);
    }

    .box:hover img:nth-child(2) {
      transform: rotate(120deg);
    }

    .box:hover img:nth-child(3) {
      transform: rotate(180deg);
    }

    .box:hover img:nth-child(4) {
      transform: rotate(240deg);
    }

    .box:hover img:nth-child(5) {
      transform: rotate(300deg);
    }

    .box:hover img:nth-child(6) {
      transform: rotate(360deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <img src="images/5.jpg">
    <img src="images/6.jpg">
  </div>

</body>

</html>

3D 转换-透视perspective

3D转换
- transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x,y轴组成的平面效果多了一条z轴
透视
- 电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果）其实只是一种视觉呈现，通过透视可以实现此目的
- 透视可以将一个2D平面，在转换的过程当中，呈现3D效果
- 透视特点：近大远小
- 注意：并非任何情况下都需要透视效果，根据开发需要进行设置，如果需要展示z轴的变化，则设置透视效果
透视属性 — perspective
- 属性名：perspective
- 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果
- 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
- 注意：透视属性需要设置给3D变化元素的父级

.bigBox {
    perspective: 1000px;
}
.box {
    /* 可以给他设置3D动画了 */
}

3D 转换-旋转

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

值	说明
rotateX(angle)	定义沿着X轴的3D旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	定义沿着Z轴的3D旋转

.bigBox {
    perspective: 1000px;
}
.box {
    /* transform: rotateX(30deg); */
    /* transform: rotateY(30deg); */
    transform: rotateZ(30deg);
}

3D 转换-位移

属性值

值	说明
translateX(x)	定义沿着X轴的位移值
translateY(y)	定义沿着Y轴的位移值
translateZ(z)	定义3D位移，设置Z轴的位移值

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

.bigBox {
    perspective: 1000px;
}
.box {
    transform: translateX(300px);
    transform: translateY(300px);
    transform: translateZ(300px);
}

位移和旋转可以同时设置，但是书写顺序会影响实际效果

3D 正方形案例

transform-style属性

用于设置被嵌套的子元素在父元素的3D空间显示，子元素会保留自己的3D转换坐标轴。
属性值：
- flat：所有子元素在2D平面呈现
- preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transfrom-style: preserve-3d，来使其变成一个真正的3D图形
一般来说，该属性设置给3D变换图形的父级元素

浏览器兼容

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

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			margin: 150px auto;
		}

		.stage {
			position: relative;
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			/* 设置内部子元素在3D空间进行展示 */
			transform-style: preserve-3d;
			/* 透视 */
			perspective: 5000px;
			/* 过渡 */
			transition: all 4s ease;
		}

		.stage:hover {
			transform: rotateX(360deg) rotateY(360deg);
			-webkit-transform: rotateX(360deg) rotateY(360deg);
		}

		.stage div {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 200px;
			font: bold 80px/200px "arial";
			text-align: center;
		}

		.stage div:nth-child(1) {
			background-color: rgba(255, 0, 0, 0.5);
			transform: translateZ(100px);
		}

		.stage div:nth-child(2) {
			background-color: rgba(0, 255, 0, 0.5);
			transform: rotateX(90deg) translateZ(100px);
		}

		.stage div:nth-child(3) {
			background-color: rgba(0, 0, 255, 0.5);
			transform: rotateX(180deg) translateZ(100px);
		}

		.stage div:nth-child(4) {
			background-color: rgba(255, 255, 0, 0.5);
			transform: rotateX(270deg) translateZ(100px);
		}

		.stage div:nth-child(5) {
			background-color: rgba(255, 0, 255, 0.5);
			transform: rotateY(90deg) translateZ(100px);
		}

		.stage div:nth-child(6) {
			background-color: rgba(0, 255, 255, 0.5);
			transform: rotateY(-90deg) translateZ(100px);
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="stage">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</div>
</body>

</html>

CSS3动画

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

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

keyframes规则

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

keyframes书写方法

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

animation属性

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

div {
    animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间; 
    /* 必须设置动画名称和过度时间，其他属性可以根据需求设置 */
}

单一属性列表

属性	描述
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或者毫秒。默认是0
animation-timing-function	规定动画的速度曲线。默认是"ease"
animation-delay	规定动画何时开始。默认是0
animation-iteration-count	规定动画被播放的次数。默认是1。infinite表示无限次播放

浏览器兼容

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .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(100px);
      }
    }

    /* 百分比定义动画细节 */
    @keyframes move2 {
      0% {
        transform: translateY(0);
      }

      25% {
        transform: translateY(100px);
      }

      50% {
        transform: translateY(0);
      }

      75% {
        transform: translateY(-100px);
      }

      100% {
        transform: translateY(0);
      }
    }
  </style>
</head>

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

</html>