css3的渐变、背景、过渡、分页
2021-01-08 09:29
标签：问题 pac pos 百分数 csharp span div 时间 circle 知识点一：渐变 线性渐变 方向：如果不给方向的时候，默认的就是从上往下开始。。 参数：可以是多个颜色值，中间用逗号分隔开 百分数：这是从哪个方向到哪个方向的过渡 径向渐变： 参数：颜色可以是多个，中间用逗号分隔开。。。 circle：扩散的程度是圆形，不论是不是正方形 百分数：由中心向外沿着半径扩散 知识点二：背景 填充图片的起始位置：background-origin： 背景图片裁剪开始位置：background-clip： 背景图大小：background-size：contain/cover/auto； 两种情况： 不论框大图小 还是框小图大 contain：直到满足水平或者垂直方向满足一个撑满，，图片就会停止变大。。 cover：直到满足水平或者垂直方向上的两个都撑满，图片就会停止变大。。多余的会溢出 知识点三：过渡 贝塞尔曲线：运动轨迹 透明度兼容性问题： 适用于IE浏览器的 css3的渐变、背景、过渡、分页 标签：问题 pac pos 百分数 csharp span div 时间 circle 原文地址：https://www.cnblogs.com/bigbang66/p/13537684.htmlbackground: 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%);
background: url(图片路径)，url(图片路径) top right; //引入背景图，，，可以加入多个，还可以在图片后头加上所处位置
background-repeat: no-repeat; //图片重复
background-size: 100% 100%; //两个值，第一个是x轴位置 第二个是y轴位置
background-position： x y; //这是移动的图片的位置
background-origin: border-box;//填充图片的起始位置是从边框开始的
background-origin: padding-box;//填充图片的起始位置是从内边距开始的
background-origin: content-box;//填充图片的起始位置是从内容开始的
background-clip: border-box; //图片裁剪位置是从内边距开始的，，这是个特例
background-clip: padding-box; //图片裁剪位置是从内边距开始的
background-clip: content-box; //图片裁剪位置是从内容开始的
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);
opicaty: n;
filter: alpha(opacity=n*100);