【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:;     暂停