知识点一:渐变
线性渐变
background: linear-gradient(red,blue); background: linear-gradient(red 10%,blue 90%); background: linear-gradient(to right, red 10%,blue 90%);
方向:如果不给方向的时候,默认的就是从上往下开始。。
参数:可以是多个颜色值,中间用逗号分隔开
百分数:这是从哪个方向到哪个方向的过渡
径向渐变:
background: radial-gradient(red,blue,blue); background: radial-gradient(red 10%,blue 20%,blue 70%); background: radial-gradient(circle,red 10%,blue 30%,blue 60%);
参数:颜色可以是多个,中间用逗号分隔开。。。
circle:扩散的程度是圆形,不论是不是正方形
百分数:由中心向外沿着半径扩散
知识点二:背景
background: url(图片路径),url(图片路径) top right; //引入背景图,,,可以加入多个,还可以在图片后头加上所处位置 background-repeat: no-repeat; //图片重复 background-size: 100% 100%; //两个值,第一个是x轴位置 第二个是y轴位置 background-position: x y; //这是移动的图片的位置
填充图片的起始位置:background-origin:
background-origin: border-box;//填充图片的起始位置是从边框开始的 background-origin: padding-box;//填充图片的起始位置是从内边距开始的 background-origin: content-box;//填充图片的起始位置是从内容开始的
背景图片裁剪开始位置:background-clip:
background-clip: border-box; //图片裁剪位置是从内边距开始的,,这是个特例 background-clip: padding-box; //图片裁剪位置是从内边距开始的 background-clip: content-box; //图片裁剪位置是从内容开始的
背景图大小:background-size:contain/cover/auto;
两种情况:
不论框大图小 还是框小图大
contain:直到满足水平或者垂直方向满足一个撑满,,图片就会停止变大。。
cover:直到满足水平或者垂直方向上的两个都撑满,图片就会停止变大。。多余的会溢出
知识点三:过渡
transition: width 2s, height 2s; //配合伪元素使用 比如:hover 下同 (这是加在要改变的元素上的) transition-property: all 2s; //所有的效果都是在2秒内完成 transition-delay: 2s; //过渡延迟效果 transition-duration: 4s; // 完成花费的时间
贝塞尔曲线:运动轨迹
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
透明度兼容性问题:
适用于IE浏览器的
opicaty: n; filter: alpha(opacity=n*100);