浙江做网站找谁,angle wordpress,网站运营指标,网创项目资源网站有两种新的图像类型完全由CSS实现:线性渐变和径向渐变。这两种渐变又各分为二;循环渐变和不循环渐变。渐变最常在背景中使用。不过#xff0c;本篇只讨论线性渐变。 渐变指从一个颜色到另一个颜色的平滑过渡。例如#xff0c;白色到黑色的渐变从白色开始#xff0c;经过一系…
有两种新的图像类型完全由CSS实现:线性渐变和径向渐变。这两种渐变又各分为二;循环渐变和不循环渐变。渐变最常在背景中使用。不过本篇只讨论线性渐变。 渐变指从一个颜色到另一个颜色的平滑过渡。例如白色到黑色的渐变从白色开始经过一系列不同深度的灰色之后最终变为黑色。渐变的平缓或骤变程度取决于渐变的作用空间。如果在100像素的长度内由白色变为黑色渐变累进的过程中每次变暗1%。此话摘自《css权威指南》如下图所示
body {background-image: -webkit-linear-gradient(left,white,black);} 1一些简单的线性渐变 效果如下图所示 第一个可能是最简单的渐变了只有两个颜色。这里渐变从背景定位区域的顶部由第一个颜色变到背景定位区域底部的第二个颜色。这个渐变之所以是从上到下的是因为渐变的默认方向是top如果想使用其他方向可以在声明渐变时先提供一个方向。
2渐变颜色
渐变中的颜色值可以使用任何类型包括带 alpha 通道的值例如rgba() 和transparent等关键字。因此完全可以从不透明度为零的颜色开始(或到不透明度为零的颜色终止)实现部分淡出的渐变效果。
如下图所示 可以看到第一个盒子从灰色变成了浅灰色第二个由黄色逐渐变为透明。
当然渐变的颜色不限于两个只要你想想用多少个颜色就用多少个如下图所示 第一个渐变有6种颜色两两之间以逗号分隔而且用的都是颜色的名称第二个由不透明到透明各颜色分布均匀。
3定位
在每个颜色值之后可以但不强求提供一个位置值。这样可以把常规情况下均匀累进的色标变换成其他方式。 如下图所示 颜色后面加距离的意思是到这个距离时该更换下一个颜色了例如30px-100px之间是黄色100px-150px为粉色依次类推。 但我要是最后位置放在300px那里但是盒子只有200px就会出现裁剪只能到200px那里剩下的都被裁剪了。在超出范围之前只能显示这么多渐变。
如下图所示 色标位置的长度值不限于px任何长度值都可以em、cm和英寸等都能用。此外在同一个渐变中甚至可以混用不同的单位但是一般不推荐这么做如果愿意还可以使用负的长度值不过那样就会出现裁剪的情况0px之前的颜色会被剪掉此处就不做例子了哈。
既然我们能每隔几十px放一个颜色那我们同样也能用百分数值放置颜色位于50%处的颜色在盒子的中点以下图为例 “急变”效果实现条纹 4斜线渐变 如果想让渐变从左上到右下可以添加一个left top反过来也可以。 由于现在浏览器多渐变支持并不好所以大多数情况下需要加浏览器私有前缀此处我用的是edge所以需要加-webkit-这个前缀当然以上所有情况不考虑IE浏览器
好了以上就是所有内容了如果有错请务必指正如果觉着写的可以的话能不能给个三连
