目录

一、渐进增强和优雅降级

二、CSS3新增选择器

1.属性选择器

2.结构伪类选择器

3.目标伪类选择器

4.否定伪类选择器

5.动态伪类选择器

6.UI状态伪类

7.层级选择器

三、阴影

1.盒⼦阴影：box-shadow

2.⽂字（⽂本）阴影:text-shadow

四、字体

1.@font-face⽅式

2.iconfont字体图标库

五、背景

六、浏览器内核和前缀

七、渐变

1.线性渐变

2.径向渐变

重复性渐变

八、精灵图

九、过渡transition

十、变形transform

1.2D变形

(1)translate【位移】

（2）scale【缩放】

（3）rotate【旋转】

（4）skew【倾斜】

（5）transform-origin【变形原点】

2.3D变形

（1）3D位移

（2）3D旋转

（3）景深【透视】perspective

(4)让背面不可见

十一、动画animation

1.创建动画的⽅式

2.使⽤动画（调⽤动画）

一、渐进增强和优雅降级

1. 渐进增强：先满⾜最基本的功能，然后再增加⼀些更好的功能。 也就是开发过程中先针对低版本的浏览器进⾏⻚⾯构建，保证最基本的功能，然后再针对⾼级浏览器进⾏⼀些 更好的效果，增加⽤户的体验。 2. 优雅降级：⼀开始就做⼀个特别完美的功能，然后针对低版本浏览器做⼀些删减。

二、CSS3新增选择器

1.属性选择器

1.[ 属性名字 ]====== 找到⻚⾯中所有带有这个属性名字的标签。 举例： [class]==== 找到⻚⾯中所有带有 class 属性的标签 2.[ 属性名字 =" 属性值 "]==== 精准查找。要求属性名和属性值完全⼀致才可以。 举例： [class="box"]=== 找到⻚⾯中 class 属性值为 box 的标签 3.[ 属性名字 ~=" 属性值 "]==== 模糊查找，要求属性值中带有这个单词即可。 举例： [class="box"]===== 找到⻚⾯中 class 值当中只要有 box 这个名字即可。 4.[ 属性名字 *=" 属性值 "]===== 更模糊查找，找到属性值当中带有这个字的即可。 举例： [class="b"]==== 找到 class 的属性值中只要带有字⺟ b 即可。 5.[ 属性名字 ^=" 属性值 "]==== 以这个值开头的 6.[ 属性名字 $=" 属性值 "]==== 以这个值结尾的 7.[ 属性名字 |=" 值 "]===== 属性值仅是 value 或者以 “value-” 开头的值（⽐如说 left-con ） (了解 )

2.结构伪类选择器

:first-child====找第⼀个⼦元素

举例：li:first-child=====找第⼀个⼉⼦，并且这个⼉⼦是li标签

:last-child====找最后⼀个⼦元素

:nth-child()

数字：写⼏就是找第⼏个

2n+1或者odd找奇数

2n或者even找偶数

:nth-last-child()=====倒着数

:only-child:只有⼀个元素才能匹配上，多个就不⾏（了解）

:empty=====找空标签的（了解）

:root======找根节点的，也就是找html的，等价于html{}(了解)

===============以下⾃⾏了解========

:first-of-type===找同类型当中的第⼀个

举例：li:first-of-type===找li当中的第⼀个⼦元素。

3.目标伪类选择器

:target ⼀般要结合锚点⼀起去使⽤ 举个例子：手风琴效果

4.否定伪类选择器

:not()=== 除了谁之外的 举例 =====:not(.div1) 除了类名为 div1 之外的都能找到

5.动态伪类选择器

:link======== 未访问 :visited===== 访问过 :hover===== ⿏标滑过 :active===== ⿏标按下 :focus====== ⿏标获得焦点的状态

6.UI状态伪类

:enabled======= 可⽤状态 :disabled====== 找禁⽤状态的 :checked====== 找默认选中状态 ::selection==== ⿏标滑过选中⼀段⽂字之后的状态（可以做⿏标滑过让这段⽂字⾼亮显示）这⾥⼀定要写 2 个冒号。

我们之前说过⼀个冒号的叫伪类 2 个冒号的叫伪元素 其实在最开始的时候并没有区分出伪元素。⼀开始 2 个冒号和 1 个冒号都叫做伪类。

7.层级选择器

后代选择器：空格 ⼦代选择器：⼤于号 兄弟选择器： + ：只能找到和他紧紧挨在⼀起的下⼀个兄弟（找亲弟弟） ~ ：找下⾯所有的（找所有的弟弟）

三、阴影

1.盒⼦阴影：box-shadow

阴影的⽔平位置 阴影的垂直位置 阴影的模糊度 值越⼤越模糊 阴影的⼤⼩ 值越⼤阴影越⼤ 阴影的颜⾊ 是内阴影还是外阴影：不写就是外阴影 写了 inset 就是内阴影

2.⽂字（⽂本）阴影:text-shadow

⽔平位置 垂直位置 模糊度 阴影的颜⾊

⽆论是盒⼦还是⽂字阴影都是⽀持多阴影的，之间通过逗号隔开。

四、字体

1.@font-face⽅式

2.iconfont字体图标库

1. 先去官⽹下载 2. 下载好了之后解压，然后复制到你的项⽬之下 3. 在 html ⾥通过 link 引⼊素材⾥⾯的 iconfont.css ⽂件

<link rel="stylesheet" href="iconfont/iconfont.css">

4. 打开素材⾥的 demo.html ⼀会你要去复制⾥⾯的名字 5. 哪⾥需要图标，就给哪⾥创建⼀个标签 ⽐如： <span class="iconfont 复制粘贴过来 "></span> 注意：复制过来的名字前⾯千万不要带点。

<!-- 在demo_index.html页面中的“Font class”复制图标名称，不要加点

这个图标相当一个字体，所以应该应用文字属性 -->

五、背景

1. 背景颜⾊ 的起始位置是从 边框后⾯ 开始的。 2. 背景图⽚ 的起始位置是在 边框⾥边 的。 3. ⽂字 的起始位置也是在 边框⾥边 的。 4. 背景图⽚ 的起始点： background-origina) padding-box: 在内填充的起始点 ( 默认值 )b) border-box ：在边框的起始点 c) content-box：在内容的起始点 5. 背景的裁切 ( ⽤来规定背景的绘制区域 ) ： background-clipa) padding-boxb) border-box ：默认值c) content-box 6. 控制 背景图的⼤⼩ ，背景尺⼨： background-size

a) background-size: 50px 50px; 将背景图的⼤⼩调整为 50*50 的 b) background-size: 50% 50%; 宽⾼调整为盒⼦的⼀半 c) cover：宽⾼等⽐例放⼤，直到铺满为⽌ d) contain：只要有⼀边占满则停⽌放⼤

7. 多背景设置 后写的在下 , 并且简化写法中不能写背景颜⾊，如果需要背景颜⾊要单独在回合写法下面写 background-color

六、浏览器内核和前缀

1.⾕歌chrome======内核(webkit)========前缀（-webkit-） 2.苹果safari======内核（webkit）======前缀(-webkit-) 3.⽕狐firefox=====内核（gecko）=======前缀(-moz-) 4.欧朋opera=======内核（presto）======前缀（-o-) 5.IE=============内核（trident）=====前缀（-ms-)

七、渐变

1.线性渐变

语法：background:linear-gradient(⽅向,颜⾊1,颜⾊2,颜⾊3,。。。) ;

从左到右从红到绿的渐变： background:linear-gradient(to right,red,green); ⽅向： to 是到的意思 ⽅向不写默认是从上到下的⼀个渐变 to right==== 从左到右 to left==== 从右到左 to bottom=== 从上到下 to top==== 从下到上 to right bottom==== 从左上到右下。。。。⾃⼰依次类推去

加前缀的写法： 如果写渐变的时候加了浏览器前缀了，那么在写⽅向的时候就不能写 to 了。 语法：background:-webkit-linear-gradient(left,red,green);

这是⼀个从左到右从红到绿的意⻅线性渐变。 ⽅向：不写 to 就是从的意思 left=== 从左到右 right=== 从右到左 top==== 从上到下 bottom=== 从下到上

方向写成角度的写法 ⻆度单位是 deg 。

background: -webkit-linear-gradient(0deg,red,green); 不加前缀：如果你写的是 0deg ，那么这个⽅向默认是从下到上的。你在去转动的时候他是瞬时间⽅向的。 加前缀： 0deg==== 默认从左到右，逆时针的。

2.径向渐变

从⼀个点向四周的渐变。径向渐变写起始点必须要加浏览器前缀，否则不⽣效。 语法：background: -webkit-radial-gradient(起点,形状,⼤⼩，颜⾊1,颜⾊2,颜⾊3。。。);

从中⼼点向四周扩散，从红⾊到绿⾊再到蓝⾊： background: -webkit-radial gradient(center,red,green,blue); 起点： center=== 中⼼点 left top=== 左上 left center=== 左中 。。。。。⾃⼰依次类推 也可以写具体的坐标点，单位可以是 px 也可以是 %

重复性渐变

⽆论是线性还是径向都⽀持重复。 语法：在线性单词之前加 repeating 即可。⾊值的百分⽐⾃⼰去定义。 线性渐变： background: repeating-linear-gradient(to bottom,red 0%,green 10%,blue 20%); 径向渐变： background: -webkit-repeating-radial-gradient(center center,red 0%,green 10%,blue 20%);

八、精灵图

图⽚整合技术：意思就是将好多⼩图整理到⼀张⼤图上⾯去。

a) 减少服务器的请求次数 b) 减⼩图⽚体积 c) 提⾼⽹⻚的加载速度

核⼼技术点其实就是利⽤背景图的位置调整。

九、过渡transition

单⼀写法： transition-property ：需要参与过渡的属性 transition-duration ：过渡的时间 transition-delay ：延迟时间 transition-timing-function ：运动曲线

1 ） ease ：逐渐慢下来 ==== 默认值 2 ） linear ：匀速运动 3 ） ease-in ：加速运动 4 ） ease-out ：减速运动 5 ） ease-in-out ：先加速后减速 6 ）⻉塞尔曲线（了解） http://cubic-/ 7 ）步⻓运动： steps

复合写法（简写⽅式） transition：过渡的属性 过渡时间 延迟时间 运动曲线;

十、变形transform

1.2D变形

(1)translate【位移】

transform: translateX(100px);====== ⽔平向右移动 transform: translateY(100px);====== 垂直向下移动 transform: translateX(100px) translateY(100px);==== 以上两句可以写成这⼀句 transform: translate(100px,100px);==== 更加简洁的写法，第⼀个值是 x 坐标，第⼆个值 y 坐标。

（2）scale【缩放】

1. 让元素根据中⼼原点进⾏缩放，默认值是 1 。 2. ⼩于 1 的值就是缩⼩ 3. ⼤于 1 的值就是放⼤ 4. scale(2) 就是将宽和⾼都放⼤ 2 倍 5. scale(2,1) 就是宽放⼤ 2 倍，⾼不变

scaleX()==== 在 x 轴上缩放 scaleY()==== 在 y 轴上缩放 scale()====x 和 y ⼀起缩放 这⾥不跟单位 是倍数关系

（3）rotate【旋转】

transform: rotateX(30deg);===== 围绕 x 轴旋转 transform: rotateY(30deg);===== 围绕 y 轴旋转 transform: rotateX(30deg) rotateY(30deg);===== 围绕 x 和 y 都旋转。 transform: rotate(30deg);===== 围绕中⼼点旋转

（4）skew【倾斜】

（5）transform-origin【变形原点】

1. 变形原点就是让元素围绕着哪个点进⾏变形。 2. 这个属性只有在设置了 transform 属性的时候才会起作⽤。 3. 元素默认原点就是中⼼点（中⼼位置）

2.3D变形

3D 场景，有 3 个坐标轴， x 、 y 、 z 轴。 a) x 轴是⽔平⽅向，向右是正，向左是负数 a) y 轴是垂直⽅向，向下是正，向上是负数 a) z 轴是前后⽅向，向前为正，向后为负数（靠近屏幕的是正数，远离屏幕的是反向，负数）

（1）3D位移

transform:translateX()====x 轴上移动 transform:translateY()====y 轴上移动 transform:translateZ()====z 轴上移动 简写： transform:translateX() translateY() translateZ() 再简写：transform:translate3D(x,y,z); 要想看到 z 轴上的效果，你必须创建出⼀个 3d 的空间（ 3d 舞台）才能呈现出 3d 的效果。

1. 谁想呈现 3d 效果，就给谁加⼀个⽗盒⼦ , 写： transform-style: preserve-3d; 2. 让⽗盒⼦适当的旋转⼀定的⻆度就可以看到 3d 效果。

（2）3D旋转

transform: rotateX(30deg);==== 围绕 x 轴旋转 transform: rotateY(30deg);==== 围绕 y 轴旋转 transform: rotateZ(30deg);==== 围绕 z 轴旋转 transform: rotate(30deg);===== 围绕中⼼点旋转。

transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); ===== 会围绕 x 、 y 、 z 轴都转。 transform: rotate3d(1,1,1,0deg);=====x,y,z, 旋转⻆度 0代表这个轴不参与转动 1代表参与转动 。以后做旋转想围绕哪个轴转建议在后⾯带上 x 、 y 、 z 。

（3）景深【透视】perspective

景深的值越⼤，距离越远，看起来就越⼩。反之景深值越⼩，距离越近，看起来越⼤。【近大远小】

创建步骤：

给 3d 舞台创建⼀个⽗盒⼦ 在⽗盒⼦上写 css 属性： perspective: 景深值 ;

(4)让背面不可见

backface-visibility:hidden;意思就是元素被翻转过去了，元素就不可⻅了。 代码练习：旋转的立方体/图片翻转背 面不可见/旋转相册...........

十一、动画animation

1.创建动画的⽅式

⽅式⼀： @keyframes 动画的名字 {from{} to{}} ⽅式⼆： @keyframes 动画名字 {0%{}....100%{}}

2.使⽤动画（调⽤动画）

想让哪个盒⼦动起来就在哪个盒⼦上使⽤动画。 单⼀写法：

animation-name===== 动画的名字（你要使⽤哪个动画） animation-duration==== 动画的运动时间 animation-delay==== 延迟时间 animation-timing-function==== 运动曲线 animation-iteration-count: infinite; 运动次数 ，写数字⼏就是运动⼏次 如果想⽆限运动- infinite animation-direction: 运动⽅向normal: 默认值 x 。正着⾛reverse ：反着⾛alternate: 先正着⾛，再反着⾛ 正反交替alternate-reverse ：先反着⾛，再正着⾛ 反正交替 animation-play-state: paused; 动画的播放状态 paused 暂停 running 运动 === 默认 ⼀般情况下这个属性会结合⿏标滑过⼀起来⽤

复合写法（简写⽅式）：animation:名字 时间 延迟 次数 曲线 代码练习：走路的小女孩/外卖小哥/轮播图

如果觉得《CSS3（选择器 过渡 变形 动画）》对你有帮助，请点赞、收藏，并留下你的观点哦！