第二周总结

总结

一、边框
border-radius圆角
border-radius: 左上 右上 右下 左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上右下 右上左下;
border-radius: 50%;圆型角
box-shadow边框阴影
box-shadow: x轴偏移 y轴偏移 阴影大小 颜色;
box-shadow: x轴偏移 y轴偏移 颜色;
border-image边框图片
二、背景
background-image背景图片
background-image: url(image/2.png),url(image/1.png);多张背景
background-size背景大小
auto图片大小
contain设置100%
cover设置2个100%，不变形图片
background-origin背景图片位置区域
background-clip背景剪切位置
三、渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(pink,#000);默认值为从上到下
to 。。。方向向哪边
to left top指定角度
30deg角度，可以为负值
径向渐变（Radial Gradients）- 由它们的中心定义
background-image: radial-gradient(blue,#000)默认由里向外
background-image: radial-gradient(blue 10px,#000 70%);控制颜色占比
ellipse椭圆，
circle 圆形
默认值根据盒子形状决定是圆形还是椭圆
三、文本效果
text-shadow文本阴影
box-shadow盒子阴影
text-overflow处理溢出文本
text-overflow: ellipsis;文本显示为省略号
text-overflow: clip;文本裁剪
word-wrap设置文本换行
word-break
引入外部字体使用@font-face
运行后加载首先显示，最好设置为背景
url()
base64
四、2D转换
transform
transform: translate(20px,50px);移动位置沿x轴和y轴移动,两个值之间用逗号隔开,
设置一个值就是沿着x轴移动,为正值时沿着x,y
单独设置x,y时,不能一起单个设置,否则只会执行最后设置的值
translate移动
position定位
transform: rotate(30deg);必须使用角度单位
正值时为顺时针选择,负值时为逆时针旋转
rotate旋转
transform: scale(2,2);第一个参数缩放是x轴(宽度)1,
第二个参数缩放是y轴(高度)
x为负值时,沿y轴翻转当前元素
y为负值时,沿x轴翻转当前元素
scale缩放(会翻转)
transform: skew(20deg,0deg);第一个值为x轴,第二个值为y轴
正值为正时针倾斜,负值为逆时针倾斜
skew倾斜
transform: matrix(1,2,-2,1,2,1);
x缩放,y倾斜,x倾斜,y缩放,x平移,y平移
matrix:2D转换简写
transform-origin: 10px 50px;改变旋转中心点，可以为上下左右，%，px–>
transform-style: preserve-3d;呈现3D空间
perspective: 200px;设置3D透视图，值越小，成像越大
backface-visibility:visible;默认状态能看见反面，
设置为hidden反面内容及颜色不能看见

2222

1111

五、过渡
过渡transition:css属性名称 过渡的时间(s,ms,1s=1000ms) 运动的曲线 开始等待的时间
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
六、动画
@keyframes创建一个动画
创建动画可以使用from…to代表0%…100%

	 animation：name duration timing-function 
	 delay iteration-count 
	 direction fill-mode play-state简写形式
	 
	 animation-name: name;设置动画名称
	 animation-duration: 2s;设置动画运动的时间
	 animation-fill-mode: forwards;动画停止的位置
	 animation-timing-function: ease;设置动画运动的曲线
	 forwards停止在最后一帧动画
	 backwards停止在第一帧动画
	 both最后运动的位置，就是停留的位置
	 animation-delay: 2s;动画开始时间(什么时候开始)
	 animation-iteration-count: 2;动画执行的次数
	 infinite无限循环
	 animation-direction: normal;
	 reverse反向
	 alternate奇数正向播放，偶数反向播放
	 alternate-reverse奇数反向播放，偶数正向播放
	 animation-play-state: paused;（轮播原理的暂停和播放）设置动画是否播放或暂停
	 paused暂停
	 running开始
	 autoplay设置视频立马播放（加载完成以后）
	  controls设置播放的进度条和按钮等
	  width和height可以设置播放的宽度高度，值可以为带单位和不带单位
	  loop循环播放
	  muted设置视频播放时静音播放
	  poster设置视频播放的封面
	  preload页面加载时加载播放视频，如果出现autoplay，那么preload就会失效

七、input