css3新增属性
box-shadow
box-shadow: 10px 10px 10px rgba(54,54,54,0.36);
元素阴影，这个不会影响页面布局；分别指定如下参数：
- 水平偏移量，正数向右，负数向左
- 垂直偏移量，正数向下，负数向上
- 阴影模糊效果，数值越大越模糊
- 颜色
border-radius
border-radius: 2px;
边框圆角半径，会影响box-shadow显示
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
设置椭圆
border-radius: 30px/10px;
position: sticky;
粘滞定位，和相对定位类型，不同的是粘滞定位可以在元素到达某个位置时将其固定住，兼容性不好；
通过设置top、bottom、left、right设置固定范围，当这些值设置为0px时，就是整个视口
渐变背景
渐变是图片，需要通过background-image进行设置；
线性渐变
渐变默认是从上到下；
-
linear-gradient(red, yellow)从上到下，红色到黄色的渐变 -
linear-gradient(to right, red, yellow)to right指定渐变方向，这个指定方向还可以设置deg（度），turn(圈) - 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，即指定的颜色之间的距离是相等的
也可以手动指定分布情况：background-image: linear-gradient(red 20px, yellow 80px);，指定渐变分界颜色出现的位置
可重复的渐变背景
background-image: repeating-linear-gradient(red 0px, yellow 40px);
径向渐变
-
radial-gradient(red, yellow)red中心向四周辐射yellow
整体和线性渐变一样；默认情况下径向渐变的形状根据元素形状来计算，即：
-
元素为正方形，径向渐变就是圆形
-
元素为长方形，径向渐变就是椭圆
-
可以手动指定径向渐变范围的大小
radial-gradient(100px 200px, red, yellow)
这个指定大小存在预设值- closest-side 到达最近的边
- closest-corner 到达最近的角
- farthest-side 到达最远的边
- farthest-corner 到达最远的角
-
可以手动指定元素的径向渐变形状：
radial-gradient(circle, red, yellow)或者radial-gradient(ellipse, red, yellow) -
可以手动执行元素径向渐变的中心点位置
radial-gradient(100px 200px at 0px 0px, red, yellow)
可重复的渐变背景
background-image: repeating-radial-gradient(red 0px, yellow 40px);
过渡
过渡，只有在属性、样式发生变化的时候才会执行，如hover状态；transition: 对象 时间，通过过渡指定一个属性切换到目标状态以过渡的方式，主要有两个，一个是目标状态，一个当前状态，一个是过渡时间；
-
transition: all 2s所有属性再2s内进行过渡 -
transition: width 0.5s, height 1s;同时指定多个使用逗号隔开
分属性
简写属性无顺序要求，只是路过同时使用duration和delay，那么第一个是duration，第二个是delay
-
transition-property 指定要执行过渡的属性，多个属性使用逗号隔开，如果要针对所有属性，那就设置为all
transition-property: width, height;transition-property: all;
-
transition-duration 执行执行过渡的持续时间，针对
transition-property不同属性设置的transition-duration也使用逗号隔开，然后会对应上去，如：transition-property: width, height; transition-duration: 1s, 2s; -
transition-timing-function 执行过渡的时间分布效果，注意，要看到效果一定要先指定
transition-during；- ease 默认效果，慢速开始，先加速再减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier() 通过指定函数，通过网站
https://cubic-bezier.com/#.17,.67,.83,.67可以得到这个曲线 - steps() 指定过渡效果分几步进行过渡，可设置一个、两个值
- 一个值就是指定分几步
- 两个值就是制定分几步，每次在一步的什么时候执行过渡
-
transition-delay 指定进行过渡的延时
动画
设置动画效果，必须先要设置一个关键帧，动画效果执行完毕就正常显示元素。
简写属性无顺序要求，只是路过同时使用duration和delay，那么第一个是duration，第二个是delay
- animation-name 指定动画的关键帧
- animation-duration 指定整个动画持续时间
- animation-delay 指定动画延时时间
- animation-timing-function 指定动画播放时间函数，这个函数指的是关键帧之间的函数；
- step() 指定的是关键帧之间的跳转次数
- animation-iteration-count 动画执行次数，默认一次
- infinite 无限次
- animation-direction 方向
- normal from -> to
- reverse to -> from
- alternate 交替 from -> to -> from …
- alternate-reverse 反向交替 to -> from -> to …
- animation-play-state 控制动画停止和播放
- running 播放
- paused 停止
- animation-fill-mode 动画执行的填充效果
- none 默认，动画执行完毕元素回到元素属性定义的位置
- forward 动画执行完毕元素停止到动画结束的位置
- backward 动画延迟等待时，元素会处于动画开始状态，结束位置会回到none位置
- both == backward + forward
关键帧
@keyframes
关键帧设置了动画执行的每一个步骤；
与transition的关系
transition – 过渡，与transition类型，但是transition需要当元素属性发生变化才会发生；而动画可以自动触发动态效果；
demo
.parent-30 {
width: 100px;
height: 100px;
background-color: silver;
/* 设置动画 */
animation-name: keyframe-1;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: ease-in-out;
}
@keyframes keyframe-1 {
/* to表示动画的开始位置，也可以使用 0% 表示 */
from {
width: 100px;
height: 100px;
}
/* from表示动画的结束位置，也可以使用 100% 表示 */
to {
width: 200px;
height: 200px;
}
<div class="parent-30">
</div>
变形
变形是指元素形状或位置发生的改变；他不会影响页面布局；这个就是和margin的区别，margin会影响到布局。
transform 用来设置变形效果，变形效果如果想要看到3D效果，就要对变形元素的父元素设置persprctive属性
平移
- translateX() 元素沿着X方向平移，平移使的百分比不是相对父元素，而是相对自身
- translateY() 元素沿着Y方向平移，平移使的百分比不是相对父元素，而是相对自身
可以利用上面两个实现可适应内容大小的块盒居中 - translateZ() 元素沿着Z方向平移
Z轴平移，正常情况下就是调整元素和人眼之间的距离，距离越大，元素离人越近
Z轴平移属于立体效果(近大远小)，默认情况下网页不支持，如果需要看见效果，必须要设置视距perspective：transform: perspective(800px) translateZ(200px);；设置视距之后Z轴平移才有效果；
平移Z轴，他是将整个屏幕向用户方向移动，就像场景视图概念，此时场景向用户移动，视图显示的范围必定会缩小，于是显示范围会缩减，计算机的视图一直是场景中心，因此会出现四周元素消失的情况。
使用
transform: translateX(-50%) translateY(-50%);这个是按照顺序进行变形的。
旋转
旋转的时候立体坐标系的原点在元素的中心位置，横穿原点的是x轴，纵穿原点的是y轴，垂直显示器平面的是Z轴，站在轴的正方向，顺时针旋转时，旋转角度为正数；逆时针为负数。
通过旋转可以使元素沿着x、y、z旋转指定的角度
- rotateZ 沿着Z旋转，旋转的点为元素中心
- rotateX 验证X旋转，旋转的轴为X轴，是元素横向的、元素纵向中点的那条线，父元素设置
perspective有立体效果 - rotateY 沿着Y旋转，旋转的是Y轴，横向左边为元素中点，父元素设置
perspective有立体效果
旋转到背面元素上的数据依旧是可见的，只不过是倒过去了。
使用
transform: rotateZ(45deg);
其他
backface-visibility
- visible 默认显示
- hidden 这个不显示是直接背景也都不显示的
使用
transform: rotateY(45deg) translateZ(100px);，这个是按照顺序进行变形的，先旋转Y轴，然后Z轴也会跟着旋转，因此平移Z轴时移动的方向并不是正对着人，而是会有一个偏移。
立体效果
perspective和transform-style均设置在父元素中
perspective
perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。
当该属性值不为 0 和 none 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。
元素位于3D空间还是平面中
transform-style
- flat 默认值，设置元素的子元素位于该元素的平面中，一般的移动(主要是Z轴移动），他是没有效果的，即使有效果，那也是计算机计算出来的，仅显示x、y平面上可以看到的；设置为
preserve-3d，那么在显示时会显示Z轴方向上的信息。 - preserve-3d 指示元素的子元素应位于 3D 空间中。
缩放
缩放的本质是对轴进行拉伸，他是一种对像素的增益，而不是直接修改了像素，也就是说显示像素=元素像素*增益
-
transform: scaleX(2)水平方向缩放 -
transform: scaleY(3)垂直方向缩放 -
transform: scale(3)双方向上的缩放 -
transform: scaleZ(3)
如果transform-style为默认情况，即flat，那么对于单个元素，此时scaleZ()是看不出效果的，因为这种元素他只是一个平面的概念，他是没有Z轴的，要看到Z轴的效果，就要将两个元素(也就是两个平面）利用position: absolute放置到相同x、y位置，然后旋转Y轴才看的出来两者的Z轴间隙。
而单纯的给人看的时候，两者的像素一直都是不变的，因此单纯在平面是无法观测到的。
变形的原点
transform-origin，设定变形原点，所有的缩放均围绕变形原点进行变形：旋转、缩放均与该属性相关。
- center 默认值，在中心位置，偶数为
n/2,奇数为n/2 + 1 transform-origin: 0px 0px
变量
兼容性差；
css中有变量的概念，但是兼容性存在问题。
变量的定义、作用域和使用
定义
定义就是在一个元素中使用--key: value;进行定义
作用域
css定义的变量的作用域是当前元素以及当前元素的后代元素
使用
var(--key)文章来源：https://www.toymoban.com/news/detail-658876.html
示例
<style>
.parent-1 {
/* 定义变量 */
--color: red;
}
.parent-1 .box-1 {
width: 100px;
height: 100px;
/* 使用变量 */
background-color: var(--color);
}
.parent-1 .box-2 {
width: 100px;
height: 100px;
/* 使用变量 */
color: var(--color);
}
</style>
<div class="parent-1">
<div class="box-1"></div>
<div class="box-2">
123
</div>
</div>
运算
兼容性差
如width: calc(100px / 2);文章来源地址https://www.toymoban.com/news/detail-658876.html
到了这里，关于css3新增属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
