「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」。
今天的主角是CSS，快来康康有哪些知识点吧~
CSS3新增特性
♥边框阴影
box-shadow：h v blur spread color inset
h：水平方向的偏移值
v：垂直方向的偏移值
blur：模糊，可选。默认为0
spread：阴影的尺寸，拓展和收缩阴影的大小，可选，默认为0
color：颜色， 可选，默认为黑色
inset：内阴影，可选，默认为外阴影
div {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 40px auto;
box-shadow: -10px 10px 5px 0px cornflowerblue inset,10px -10px 5px 0px cornflowerblue inset;
}
♥文字阴影
text-shadow：xoffset yoffset blur color
♥伪元素选择器
重点：E::before、E::after
- 是一个行内元素，想设置宽高必须转化为块级元素
- 必须添加content属性，哪怕content不设置内容，也需要content: ""
- 不会在dom树上生成
♥2D转换
-
移动translate，可以移动元素的位置，对行内标签无效，不会影响其他元素的位置
-
translate里设置的百分比是参照自身的宽高度来的
-
语法：
transform: translate(x, y);//也可以分开写 transform: translateX(n); transform: translateY(n);
-
-
旋转rotate，单位度数：deg
-
语法：
transform: rotate(n);
-
-
2D转换中心点：transform-origin
-
语法：
transform-origin: x y;//也可以用方位名词 top bottom left right
-
-
2D转换之缩放scale，放大缩小
-
语法：
transform: scale(x, y);
-
♥3D转换
-
3D移动
- transform：translate3d(x, y, z);
-
如果想在网页中呈现3d效果需要透视：perspective，透视写在被观察元素的父盒子上面
-
3D旋转:rotate3d
-
3D呈现：transform-style,加在父盒子上，影响的是子盒子
- transform-style: preserve-3d;
♥过渡效果
-
transition-property：添加过渡效果的样式属性名称
eg：
transition-property: left； -
transition-duration：过渡效果的耗时，以秒为单位
eg:
transition-duration: 2s； -
transition-timing-function: 设置事件函数-控制运动的速度，如匀速，变速
eg:
transition-timing-function: linear； -
transition-delay: 过渡效果的延迟
eg: transition-delay: 2s;
简写：transition：属性名称 过渡时间 速度方式 延迟
♥动画
语法：
//动画定义
@keyframes 动画名 {
0% {...},
100%{...}
}
//动画调用，谁用谁调
animation-name：动画名；
animation-duration: 持续时间；
/*最后的最后：calc:可以动态计算css的宽高， 运算符左右两侧必须加空格，否则计算会失效 */
ok，这就是今天的全部内容了，内容涵盖的知识只是小部分，不能起到囊括的作用，还是要多多看书学习哟~
