圆角 border-radius
<html>
<div class="box"></div>
</html>
<style>
.box {
margin: 200px auto;
width: 100px;
height: 100px;
background: gray;
border-radius: 10px 20px 30px 40px;
/* 属性值
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
border-radius中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径。
圆形与椭圆：
一旦使用百分比，参照的是元素本身的高度与宽度
当拿50%时，宽等于高为圆形 宽不等于高为椭圆形 */
}
</style>
盒阴影 box-shadow
<html>
<div class="box"></div>
</html>
<style>
.box{
margin: 200px auto;
width: 100px;
height: 100px;
background: gray;
box-shadow: 1px 1px 1px 1px yellowgreen inset;
}
/*
box-shadow属性值
x：水平阴影的位置，必填。允许负值，负值往左，正值往右
y：垂直阴影的位置，必填。允许负值，负值往上，正值往下
blur ：由边界线向外模糊多少像素，选填
spread ：盒子阴影尺寸，上下左右都向外扩展多少像素
inset：是否有内阴影，默认没有
*/
</style>
背景 background
图片 background-image
<style>
.box{
background-image:url('1.jpg'),url('2.jpg')
}
/*
使用逗号把图片分开注意：元素引入多个背景图片，前面图片会覆盖后面的图片
*/
</style>
- 裁剪
background-cilp
<style>
.box{
background-cilp:border-box；
}
/*
属性：
border-box：背景被裁剪到边框盒（从边框开始绘制背景图片）--- 默认
padding-box：背景被裁剪到内边距框（从内边距开始绘制背景图片）
content-box：背景被裁剪到内容框
text：给文本填充图片背景
*/
/*
兼容写法
Firefox3.6-
-moz-background-clip: border-box || padding-box || context-box || no-clip
Webkit
-webkit-background-clip: border-box || padding-box || context-box || no-clip || text
opera
-o-background-clip: border-box || padding-box || context-box || no-clip
W3C标准 Firefox4.0+
background-clip: border-box || padding-box || context-box || no-clip || text
*/
</style>
- background-origin
定义：设置背景图像的原始起始位置
<style>
.box{
background-origin:border-box
}
/*
背景图片坐标原点与这三个有关系
属性：
border-box：相对于边框来定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位
*/
</style>
- background-repeat
定义：设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复。
/*
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置
*/
- background-size
定义：指定背景图像的大小
/*
属性：
number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现
*/
- 复合属性background
定义：可以在一个声明中设置所有的背景属性
<style>
.box{
background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')
}
</style>
渐变
线性渐变
定义：可以在两个或者多个指定颜色之间显示平移的过渡
语法：background:linear-gradient(方向，开始颜色，结束颜色)
方向介绍：
向从上到下（默认）
background: linear-gradient(red,blue)
方向从左到右
background: linear-gradient(to right,red,blue);
对角
background: linear-gradient(to right bottom,red,blue);
角度(单位deg)
角度说明：0deg 将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变
background: linear-gradient(角度,red,blue);颜色结点：默认每个颜色均匀分布
background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
从0%到10%，为红色，从10%到20%为红色到蓝色的渐变，从20%到30%为蓝色到绿色的渐变，从30%到40%，为绿色到黄色的渐变,从40%到100%为黄色background: linear-gradient(red 10%,blue);
从0%到10%，为红色，从10%到100%为红色到蓝色的渐变，最后如果不写具体数值，默认到100%background: linear-gradient(red,blue 30%);
从0%到30%，为红色到蓝色的渐变如果第一个不写，默认数值是 0%由透明色变为不透明色
background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));重复渐变
注意：把元素的整体宽度看成100%
background: repeating-linear-gradient(90deg,red 0%,blue 20%);
background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
径向渐变
定义：从起点到终点，颜色从内向外进行圆形渐变
语法：background:radial-gradient(形状尺寸，开始颜色，结束颜色)
- 形状分类
circle --- 圆形
ellipse --- 椭圆形
注意：当元素的高和宽一样时，参数无论设置哪个，都是圆形
- 尺寸大小
closest-side最近边
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最远边
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最远角
background: radial-gradient(farthest-corner circle,red , blue);
- 颜色结点
background:radial-gradient(circle,red 50% ,blue 70%);
注意：此时的百分比,指的是圆心到元素最远端的距离（角度）
- 重复渐变
background: repeating-radial-gradient(red 0%,blue 20%);
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);
过渡
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
属性：
1. transition-property属性
定义：设置对象中的参与过渡的属性,即改变的过渡属性 （比如宽高，背景颜色）
语法：transition-property：none | all | property参数
- none： 没有属性改变
- all : 默认值，所有属性都改变
- property： 元素的属性名 width,height,background等
2. transition-duration属性
定义: 设置对象过渡的持续时间
语法：transition-duration：time
参数说明：规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0
3. transition-timing-function属性
定义：设置对象中过渡的动画类型，即规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
语法：只能使用一个属性值
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);参数说明：
ease:平滑过渡（0--慢--快--慢）等于cubic-bezier(0.25,0.1,0.25,1)，默认值
linear:线性过渡（匀速）等于 cubic-bezier(0,0,1,1)
ease-in:慢--快 等于 cubic-bezier(0.42,0,1,1)
ease-out:快--慢 等于 cubic-bezier(0,0,0.58,1)
ease-in-out:慢--快--慢 等于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
4. transition-delay属性
定义：设置对象延迟的过渡时间
语法：transition-delay：time
参数说明：
指定秒或者毫秒数来延迟动画效果的开始，默认是0
5. transition复合属性
语法：transition ： property duration timing-function delay；
参数说明：过渡时间和延迟时间的顺序不能乱
变化
2D变化
1. rotate() 2D旋转
定义：通过指定一个角度参数，对元素指定一个2D的旋转
语法：transform：rotate(angle) 单位deg
参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
<html>
<div class="box"></box>
</html>
<style>
.box{
width: 60px;
height: 60px;
background: aqua;
transform:rotate(45deg)
}
</style>
2.translate() 2D平移
定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动
分类：
translateX() 仅水平方向移动
语法：transform：translateX() 单位pxtranslateY() 仅垂直方向移动
语法：transform：translateY() 单位pxtranslate(x,y) 水平方向和垂直方向同时移动
语法：transform：translate( X, Y) 单位px
注意：如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移
<html>
<div class="box"></box>
</html>
<style>
.box{
width: 60px;
height: 60px;
background: aqua;
transform:translate(100px,50px)
}
</style>
3. scale() 2D缩放
定义：设置元素的缩放程度
分类：
scaleX( ) 仅水平方向缩放
语法：transform：scaleX()scaleY( ) 仅垂直方向缩放
语法：transform：scaleY()scale(x,y) 使元素水平和垂直方向同时缩放
语法：transform：scale(x,y)
参数值：
- 数字，表示与元素原本大小的倍数值，默认值为1，原本大小
- 大于1的值都表示放大的倍数值
- 小于1但是大于0表示的是缩小的倍数值
- 为0，缩小到没有
- 可以规定负值，表示的是反向放大缩小的倍数值
4. skew() 2D扭曲/倾斜
定义：设置元素的倾斜状态
分类：
skewX( ) 仅使元素在水平方向上扭曲变形，单位deg 正值 ----逆时针skewY( ) 仅使元素在垂直方向上扭曲变形，单位deg 正值 ----顺时针
skew( ) 使元素在水平方向和垂直方向上扭曲变形，单位deg
注意：0deg与180deg 效果一样
5. 变化基点
定义：元素变换的基准点
语法： transform-origin：水平方向 垂直方向 ，未设置时以元素自己中心为变化基点
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
3D变化
- 开启3d空间transform-style: preserve-3d; 一般给父元素开启3d空间，其子元素就会受到3d空间的影响
- perspective属性是透视属性，设置其属性值；相当于视距，眼睛到屏幕的视距。通过透视属性才能够看清元素在Z轴的变化。（透视属性可以放在在其父元素上，才能看到其子元素的xyz轴的具体变化）,大于或等于0,值越大，元素看起来越大，不能为负值
- 子元素设置3d变换效果
3D旋转 rotate3d
格式：
transform：rotateX（X轴旋转角度）
transform：rotateY（Y轴旋转角度）
transform：rotateZ（Z轴旋转角度）
transform：rotate3d（1,1,1,deg）
指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转
<html>
<div class="parent">
<div class="child"></div>
</div>
</html>
<style>
.box {
width: 60px;
height: 60px;
background: aqua;
/* transform:translate(100px,50px); */
transform: skewY(-10deg);
}
.parent {
width: 200px;
height: 200px;
margin: 100px auto;
background: gray;
transform-style: preserve-3d;
perspective:200px; /*开启透视*/
}
.child {
width: 100px;
height: 100px;
background: aqua;
}
.child:hover {
/* transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg); */
transition: 1s;
transform: rotate3d(1, 1, 1, 45deg);
}
</style>
3D缩放
格式：
transform: scaleX(缩放倍数)
transform: scaleY(缩放倍数)
transform: scaleZ(缩放倍数)
注：x轴和y轴的缩放就是宽和高的效果，z轴比较特殊，需要配合旋转才能看见效果
<html>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</html>
<style>
.box {
width: 60px;
height: 60px;
background: aqua;
/* transform:translate(100px,50px); */
transform: skewY(-10deg);
}
.parent {
width: 200px;
height: 200px;
margin: 100px auto;
background: gray;
transform-style: preserve-3d;
perspective:200px; /*开启透视*/
}
.box1,
.box2,
.box3 {
width: 200px;
height: 200px;
background-color: lightcoral;
margin: 30px 0;
transition: 1s;
}
.box1:hover {
transform: scaleX(1.5);
}
.box2:hover {
transform: scaleY(1.5);
}
.box3:hover {
transform: scaleZ(1.5) rotateX(80deg);
}
</style>
3D平移 translate3d
格式：
transform：translateX（X轴平移位置参数）
transform：translateY（Y轴平移位置参数）
transform：translateZ（Z轴平移位置参数）
transform：translate3d（100px,100px,100px），x,y不能省略写，不想要就写0
指定对象的平移位置参数，单位px
帧动画 animation
定义：使元素从一种样式逐渐变化到另外一种样式的效果
关键帧 @keyframes
定义：keyframes关键帧，用来决定动画变化的关键位置
注意：keyframes 控制关键位置，并不是所有的位置属性值：
from 表示起始点
to 表示终点
from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置
调用关键帧 animation
animation-name 帧动画名称
所应用的动画名称（关键帧名称），必须配合@keyframes使用。
animation-duration 设定动画持续时间
动画持续的时间，例：animation-duration:3s; 即为动画的持续时间为3s。
animation-timing-function 动画的运动状态
linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态,没有中间的过渡效果（可实现逐帧动画）
animation-delay 动画的延迟时间
动画的延迟时间，例：animation-delay:5s; 即为动画开始前延迟的时间为5s。
animation-iteration-count 动画的循坏次数
infinite： 无限循环
number: 循环的次数 ，number为数字，其默认值是1
animation-direction 动画在循环中是否反向运动
normal： 正常方向。
reverse： 反方向运行。
alternate： 动画先正常运行再反方向运行，并持续交替运行。
alternate-reverse：动画先反运行再正方向运行，并持续交替运行。
animation-play-state 设置动画的状态
running: 运动
paused: 暂停
示例：鼠标移动到box上暂停动画
.box:hover{
animation-play-state: paused;
}
animation-fill-mode 设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先
animation复合属性（不推荐使用 ）
简写：
animation ： name duration timing-function delay interation-count direction play-state
