一、css3有哪些新属性？
-
圆角边框
border-radius -
盒子阴影
box-shadow用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 -
背景图片大小
background-size:contain | cover | 100px 100px | 50% 100%;contain 保持纵横比，有空隙。cover 保持纵横比，没有空隙 -
过度
transition要过渡的属性 花费时间 运动曲线 何时开始; -
转换（位移 缩放 旋转 3D转换）
transform语法格式transform: [转换函数]; -
动画
animation
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
/* 使用动画 */
/* myMove 动画名称 */
/* 3s完成所需时间 */
/* infinite无限循环 */
animation: myMove 3s infinite;
}
/* 定义动画 */
@keyframes myMove {
0% {
background: green;
transform: scale(1);
}
100% {
background: red;
transform: scale(2);
border-radius: 50%;
}
}
</style>
<body>
<div class="box"></div>
</body>
- 线性渐变
linear-gradient
- 语法：
background-image：linear(direction，color-stop1，color-stop2，…)参数说明
-
direction：用角度值指定渐变的方向（或角度）。 -
to left：设置渐变为从右到左。相当于：270deg
-
to right：设置渐变从左到右。相当于：90deg
-
to top：设置渐变从下到上。相当于：0deg
-
to bottom：设置渐变从上到下。相当于180deg，这是默认值，等同于留空不写。
-
color-stop：用于指定渐变的起止颜色： -
color：指定颜色。
-
length：用长度值指定起止色位置。不允许负值
-
percentage：用百分比指定起止色位置。
-
盒子模型
box-sizing: content-box(标准盒模型) || border-box(怪异盒模型)
