day15、day16笔记

border-radius 设置圆角

border-radius 左上 右上 右下 左下

左上 ！= 右下 右上 = 左下
border-radius 左上 右上 右下；

左上 = 右下 右上 = 左下
border-radius 左上 右上；

实质上，每一个角的上面，都有一个水平半径和一个垂直半径，如果每一个方向上的半径不同，则需要写成 水平半径/垂直半径
注意：圆角的值 可以设置 50%

background-origin 设置背景图渲染的起始位置

padding-box 默认值，从padding位置开始渲染
content-box 从内容部分开始渲染
border-box 从border开始渲染

background-size 设置背景图的填充方式，也就是设置背景图的大小

cover 以最短边为基础渲染图片。长边按比例缩放，有可能无法显示全部图片
contain	以最长边为基础渲染图片。短边按比例缩放

还有以下写法
background-size：宽度 高度；
如果只写一个高度，高度按照比例渲染
宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比

mask 背景蒙版

背景蒙版可以把 透明图的透明部分渲染为不透明，把不透明的部分渲染为透明
设置方式和背景图设置一致

浏览器前缀
-webkit- ：是谷歌、苹果等浏览器内核的前缀
-moz- ：是火狐浏览器内核的前缀
-ms- ：是IE浏览器内核的前缀
-o- ：欧朋浏览器内核的前缀

box-shadow 设置阴影

x方向的偏移量、y方向的偏移量、阴影的发散度(模糊度)、阴影的宽度、阴影的颜色
[阴影位置] inset 设置内阴影

设置多组阴影，使用英文逗号隔开，设置的方式一样
注意，阴影不占据文档流空间，不会引起元素盒模型的变化

线性渐变

background：linear-gradient （to 方向，颜色 开始渐变，颜色 开始渐变的位置…）

linear-gradient 里面的参数
1.to 方向，方向可以使用具体的方位单词，可以使用角度度数

如果度数，则可以直接写角度，不需要加to
正值：顺时针旋转
0 -> 向上
90 -> 向右
180 -> 向下
负值：逆时针旋转
开始渐变的位置，可以是具体的数值，也可以是百分比

径向渐变

background：radial-gradient 设置径向渐变
（半径 形状 at圆心，颜色 渐变的开始位置，颜色 渐变的开始位置…）
形状：
1.circle 圆形，默认值，可以省略
2. ellipse 椭圆

半径可以是具体的数值，也可以是如下系统给定的值：
farthest-corner 最远角
closest-corner 最近角

farthest-side 最远边
closest-side 最近边

圆心的位置

1. 可以是具体数值，第一个数值代表x轴方向，第二个数值代表y轴方向
2. 可以是 left top right bottom center 等方位名词的组合

渐变的开始位置
1.可以是具体的值
2. 可以是百分比，百分比是以半径长度为基准

多个背景图

css3支持设置多个背景图
设置方式是使用英文逗号分隔开每一个位置

重复性渐变

repeating-linear-gradient 设置重复线性渐变
设置方式和线性渐变一样，效果是自动渲染出重复的渐变内容

repeating-radial-gradient 设置重复径向渐变，语法同径向渐变一致

设置重复性渐变需要注意

1. 需要设置重复渐变的颜色起始位置
2. 至少设置两种颜色

同背景图一致 ，也可以设置多组渐变，同时设置多组背景图或者渐变图，后面设置的会被前面设置的图覆盖

2D形变

1.平移
2.旋转
3.缩放
4.拉伸（倾斜）
注意：
1.行元素不能形变，img和input除外
2.仅仅是元素形状的变化，文档流空间并没有变化

设置形变，使用transform 属性

1.平移使用 translate

		水平方向平移
		translateX（num）num是具体值，正数向右平移，负数向左平移
		垂直方向平移
		translateY（num）num是具体值，正数向下平移，负数向上平移
		复合写法
		translate（x,y）

2.旋转使用 rotate（度数）

度数的单位是deg
	度数为正，顺时针旋转
	度数为负，逆时针旋转
	形变的层级，后来者居上
	使用transform-origin属性，设置形变的参考点。默认是 center center
	transform-origin：x轴方向的位置 y轴方向位置
	1.具体的数值
	2.left top right bottom center 等方向名词的组合，如果只写一个词，则另一个默认是 center

3.缩放使用 scale（x轴方向的倍数，y轴方向的倍数）

	如果x轴和y轴的缩放倍数相同，则可以只写一个scale（n）
	如果需要把形变组合在一起
	transform：scale（2） rotate（360deg） translate（10px，100px）；

4.设置拉伸 skew（）

	写法和translate 一样，分为x轴倾斜，y轴倾斜和复合写法
	skewX（n+deg）元素倾斜，就是元素和y轴的夹角为n度
	x轴的度数为正，向左倾斜
	x轴的度数为负，向右倾斜
	y轴同理
	注意，度数不能是90度，使用复合写法，他们的和不能为90

如果同时设置 平移和缩放，有两种写法
1.先写平移，然后再缩放，他的结果是 先平移到具体位置，然后在该位置上执行缩放
2.先写缩放，然后在平移，他的结果是 先把所有的值进行缩放，然后按照缩放后的值平移
一般都用第一种写法

过渡动画

设置元素从一种状态达到另一种状态的动画效果
设置属性是 transition
transition-property 设置需要过渡的css属性，如果有多个属性需要过渡，则可以用英文逗号分开，也可以直接设置all，all表示所有变化的css属性都需要过渡，如果不设置该属性，默认为all

transition-duration 设置过渡动画的持续时间，单位是s秒

transition-delay 设置过渡动画的延迟时间，动画开始的时候有延迟，结束的时候也有延迟

transition-timing-function 设置动画的变化曲线
ease 默认值，先快后慢
linear 匀速运动
ease-in 淡入效果，先快后慢
ease-out 淡出效果，先匀速，再快，再慢
ease-in-out 淡入淡出，两边慢，中间快
以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写：
transition：property duration timing-function delay 后面两个可以省略，直接设置默认值

过渡动画的触发时机
过渡动画不会主动触发
触发方式：

1. 通过伪类触发 hover focus targeted
2. 媒体查询
3. 通过js触发