盒子阴影
-
div的阴影
-
box-shadow:左右，上下，模糊程度，颜色；- 第一个值是控制的是左右 ，负值是往左，正值是往右
- 第二个值是控制上下 ，赋值向上，正值向下
box-shadow: 15px 15px 5px rgba(0,0,0,0.5);
-
渐变
-
**线性渐变 **
background: linear-gradient(渐变方向，颜色1 占比例%，颜色2 占比例%)-
background: linear-gradient(to right, #565c5c, #e6e6e6 100%);to right 渐变的方向
**颜色 50% 这个颜色占整个div的50% **
-
背景与渐变
-
背景重复问题
background-repeat:no-repeat /*背景不重复*/ background-size:100% | cover /*调整图片大小*/ background-position:center center /*背景图的位置*/全屏缩放背景图
body { position: relative; width: 100%; height: 100vh; margin: auto; background: url(./000.jpg) no-repeat 50% 50%; top: 0; display: table; background-size: cover; overflow: hidden; }
-
字体样式font
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体*/
{
100 ，200 ，300 ，400 ，500 ，600
}
font-variant: small-caps; /*小写变大写*/
line-height行高
利用软件进行量取行高的方法
**为了能让他更好的居中，一般在设置行高，字号，一般是偶数，可保证他们 的差一定是偶数，就能够被2整除 **
-
多行文本的垂直居中
vertical-align: middle;属性-
vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
-
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
主要是用在图片，表格，文本对齐
文本属性
letter-spacing: 0.5cm ;单个字母之间的间距word-spacing: 1cm;单词之间的间距text-transform: lowercase;单词字体大小写。uppercase大写、lowercase小写
模糊filter
- filter: none;去掉模糊
- filter: grayscale(80%);将图片转换成灰度图像
filter: grayscale(80%);
- filter: blur(5px);图片模糊度
-
filter: brightness(40%);线性乘法
- 可以让图片看起来更亮或者更暗
、
背景 background
- background-color:背景颜色
- background-image:url() 设置背景图片
- background-size: ()px 设置背景图的尺寸
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比（相对于容器的大小） */
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;
/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
background-size: contain;
- ！！注意，在这里设置背景图片这条属性，可以综合其他是属性值一起使用，写在一条上例如
background-image:url(images/01.png) no-repeat center center / 30px 30px;
-
解释
上面的代码里面包含了图片是否平铺background-repeat: no-repeat;
-
还有就是背景图的位置 background-position:center center他的属性值可以是像素值，正常值是居中（center）左（left) 上（top) 下（bottom) 右边 （right) ,
这个属性很重要哦，在制作精灵图的时候需要，在制作二倍精灵图，这个属性很重要，是设置图片在什么位置显示，所以要牢记这个属性描述左右的词：left、center、right
描述上下的词：top 、center、bottom
-
background-attachment 属性，设置背景图是否固定，不随着浏览器上下滚动
- 属性值fixed，背景图固定不在随着浏览器滚动
- scroll，与上一个属性值相反，为默认值；
-
background-image这个 属性值也可以设置背景渐变
- 属性值：
linear-gradient(方向，起始颜色，终止颜色) - 方向可以是：
to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）.
- 属性值：
/* 不写方向，表示默认的方向是：从上往下 */
/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
div{
background-image: linear-gradient(to right,
yellow 0%,
red 40%,
green 70%,
blue 100%);
}
过渡与动画
本文主要内容：
过渡：transition
2D 转换 transform
3D 转换 transform
动画：animation
过渡：transition
transition 包括以下属性：
transition-property: all;如果希望所有的属性都发生过渡，就使用all。transition-duration: 1s;过渡的持续时间。-
transition-timing-function: linear;运动曲线。属性值可以是：-
linear线性 -
ease减速 -
ease-in加速 -
ease-out减速 -
ease-in-out先加速后减速
-
transition-delay: 1s;过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
- 2D转换包括：缩放、移动、旋转。
我们依次来讲解。
1、缩放：scale
格式：
transform: scale(x, y);
transform: scale(2, 0.5);
参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比。
2、位移：translate
格式：
transform: translate(水平位移, 垂直位移);
transform: translate(-50%, -50%);
参数解释：
- 参数为百分比，相对于自身移动。
- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
应用：让绝对定位中的盒子在父亲里居中
我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
margin-left: -300px; 然后，向左移动宽度（600px）的一半
}
现在，我们还可以利用偏移 translate 来做，这也是比较推荐的写法：
div {
width: 600px;
height: 60px;
background-color: red;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】
}
3、旋转：rotate
格式：
transform: rotate(角度);
transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。
3D 转换
1、旋转：rotateX、rotateY、rotateZ
3D坐标系（左手坐标系）
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。
浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
旋转的方向：（左手法则）
左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。
从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。
格式：
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
2、移动：translateX、translateY、translateZ
格式：
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
3、透视：perspective
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。
格式有两种写法：
作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。
格式举例：
perspective: 500px;
4、3D呈现（transform-style）
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */
transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
动画
动画是CSS3中具有颠覆性的特征，可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
js 定义函数：
function fun(){ 函数体 }
调用：
fun();
同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：
定义动画：
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用：
animation: 动画名称 持续时间；
其中，animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
2、动画属性
我们刚刚在调用动画时，animation属性的格式如下：
animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。
（1）动画名称：
animation-name: move;
（2）执行一次动画的持续时间：
animation-duration: 4s;
备注：上面两个属性，是必选项，且顺序固定。
（3）动画的执行次数：
animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite表示无数次。
（3）动画的方向：
animation-direction: alternate;
属性值：normal 正常，alternate 反向。
（4）动画延迟执行：
animation-delay: 1s;
（5）设置动画结束时，盒子的状态：
animation-fill-mode: forwards;
属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
（6）运动曲线：
animation-timing-function: ease-in;
属性值可以是：linear ease-in-out 。
