【CSS3】重点知识内容，快速上手

推荐前端学习路线如下：

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。

层级选择器

a>b b是a的儿子级别

a+b b在a的后面 必须相邻 而且是兄弟

a~b b在a的后面 兄弟

属性选择器

img[alt] 写有alt属性的img

input[type="radio"] type="radio"的input

img[class~="mr20"] 类名中包含mr20的img

img[class^="pic"] 类名中以pic三个字母开头的img

img[class$="pic"] 类名中以pic三个字母结尾的img

img[class*="pic"] 类名中包含pic三个字母开头的img

img[class|="pic"] 类名中以pic为类名或者以pic-开头的img

伪类选择器

结构性伪类选择器

a:first-child{} 第一个子元素并且是a标签

a:last-child{} 最后一个子元素并且是a标签

a:nth-child(n){} 第n个子元素并且是a标签 2n（evev)偶数 2n+1(odd)奇数

a:only-child{} 只有一个子元素并且是 a 标签

a:nth-last-child(n){} 倒数第n个元素并且是 a 标签

a:first-of-type{} a标签中的第一个

a:nth-of-type(n){} a标签中的第n个

a:nth-last-of-type(){} a标签中的倒数第n个

a:only-of-type{} 只能有一个a标签

a:empty{} a标签中的空元素

目标伪类选择器

E:target 选择匹配E的所有元素 锚点

UI 元素状态伪类选择器

:enabled 可用状态

:disabled 禁用状态

:checked 被选中

:selection 文本被选中

否定伪类选择器

E:not(s) 匹配所有不匹配简单选择符s的元素E

动态伪类选择器

E:link 链接伪类选择器 定义了超链接并未被访问过

E:visited 链接伪类选择器 定义了超链接并已被访问过

E:active 用户行为选择器 定义匹配元素被激活状态

E:hover 用户行为选择器 定义用户鼠标停留状态

E:focus 用户行为选择器 获取焦点 文本框

浏览器前缀

-ms- IE浏览器前缀

-moz- 火狐浏览器前缀

-o- Opera（欧朋）浏览器前缀

-webkit- 谷歌、苹果浏览器前缀

@font-face的语法规则：

'''css

@font-face{

font-family: "";     起名字

src: url();          字体路径

}

div{

font-family: "";

}

inconfont

投影

文字投影

text-shadow:10px 10px 10px red;

        x轴  Y轴   模糊 颜色

box-shadow:10px 10px 10px 10px red,inset 10px 10px 10px 10px red;

        x轴  Y轴  模糊 拓展 颜色 内阴影

边框

border-radius:; 圆角

border-image-source:url(); 图片路径

border-image-slice:fill 27 27 27 27; 直接写数据不跟px 由边框向内切割距离

border-image-repeat:repeat/round/stretch 中间边框位置图片的平铺方式

border-image-outset:; 边框向外扩展距离 只是视觉上的效果

background:; 背景

background-color:;

background-image:url();

background-repeat:;

background-position:;

background-origin:; 背景图片开始渲染的位置

border-box   padding-box(默认)  content-box

background-clip:; 背景图片裁剪的位置 外面的剪掉 里面的留下

border-box   padding-box(默认)  content-box

background-size:;

100px  100px

100%   100%

cover  铺满  等比例缩放

cotain 图片全部展示  等比例缩放

渐变

线性渐变 background-image:linear-gradient();

linear-gradient(red,green,pink);

linear-gradient(to left,red,green);

linear-gradient(30deg,red,green);

linear-gradient(30deg,red 10%,green 20%);

repeating-linear-gradient(30deg,red 10%,green 20%);

径向渐变 background-image:radial-gradient();

radial-gradient(red,green,pink)

radial-gradient(circle,red,green,pink)

radial-gradient(at top left,red,green,pink) / radial-gradient(at 100px 200px,red,green,pink)

radial-gradient(circle at top left,red,green,pink)

radial-gradient(100px at top left,red,green,pink) / radial-gradient(closest-corner at top left,red,green,pink)

closest-corner/farthest-corner

closest-side/farthest-side

transition:; 过渡

transition-duration:; 持续时间 必不可少

transition-property:; 参与过渡的属性

transition-delay:; 延迟时间

transition-timing-function:; 过渡效果变化

transform:; 旋转

2D

transform:;

translate(x,y)/translateX()/translateY()     偏移

scale(x,y)  /  scaleX()  /   scaleY()        缩放

rotate(45deg)  /  rotateX(45deg)   / rotateY(45deg)    旋转

skew(30deg,30deg)   skewX()   skewY()        倾斜(默认z轴)

transform-origin:center top; 中心点

3D

perspective:1200px; 透视点距离

transform-style:perserve-3d; 3D 样式

动画

@keyframes name{

from{}

to{}

}

或者

@keyframes name{

0%{}

100%{}

}

animation：； 复合属性，检索或设置对象所应用的动画特效

animation: cuihua 2s ;

animation-name:; 名字

animation-duration:; 时间

animation-delay:; 延迟

animation-timing-function:; 过渡效果

linear ease  ease-in ease-out ease-in-out steps()

animation-iteration-count:; 循环次数

infinite（无限循环）    

animation-direction:; 方向

reverse（反方向）  alternate（正反）  alternate-reverse（反正）    

animation-paly-state:; 暂停