百事可乐网站建设优缺点,seo关键词优化指南,网站编辑器是怎么做的,中润建设集团有限公司网站群线性渐变
liner-gradient属性值用来设置线性渐变#xff0c;第一个参数值是方向#xff0c;默认是从上往下#xff0c;往后就是渐变颜色的种类。
background-image:liner-gradient(方向#xff0c;颜色1#xff0c;颜色2...) .box {display: flex;width: 400px;height: … 线性渐变
liner-gradient属性值用来设置线性渐变第一个参数值是方向默认是从上往下往后就是渐变颜色的种类。
background-image:liner-gradient(方向颜色1颜色2...) .box {display: flex;width: 400px;height: 400px;background: linear-gradient(orange,red);//backgournd可以设置所有背景属性} 方向设置
to方位。首先我们可以使用to方位改变位置比如从下往上渐变在颜色前面加上to top。我们还可以设置两个方位这样就变成了对角线。 background: linear-gradient(to top right,orange,red); 角度表示。默认是从上往下所以我们把中间分界线当成0deg,逆时针旋转90deg就是向右这样子我们就可以用角度代表着方向比如上面对角线我们可以写成 background: linear-gradient(45deg,orange,red); 颜色设置
颜色设置就是通用的三种方式
英文单词。16进制。rgba。如果我们想要加透明度那么就用rgba设置最后一个代表的就是透明度。 径向渐变
radial-gradient用来设置径向渐变不同线性方向径向需要设置形状大小。
background-image:radial-gradient(形状大小颜色1颜色2...)
默认从中心均匀地渐变。 形状设置
椭圆默认值。我们可以用ellipse将形状设置为椭圆。圆形。用circle可以将形状变成圆。将上面的形状设置为圆如下 background: radial-gradient(circle, orange, pink); 大小设置
closest-side用来设置从中心到最近的边的渐变大小closest-corner用来设置从中心到最近的角的渐变大小farthest-side用来设置从中心到最远的边的渐变大小farthest-corner用来设置从中心到最远的角的渐变大小 具体数值用百分比设置就可以。 background: radial-gradient(closest-side at 10% 10%, orange, pink); 重复渐变
如果我们在线性渐变/径向渐变前面加上repeating就是重复渐变重复渐变需要我们给颜色设置大小具体可以用百分比或px来表示 background: repeating-linear-gradient(45deg,orange, red 100px); 锥形渐变 渐变的方式可以指定百分比等或是角度deg,默认从中心往上的线开始,顺时针开始旋转渐变 (1)指定渐变开始点 background:conic-gradient(white 45deg, black 90deg,red 180deg); 45deg以前的区间为白色 90deg的地方不渐变,其他区间会和前后的元素产生渐变 180deg的地方不渐变,之前的区间会和前面的元素产生渐变,之后不渐变 (2)只需要间断颜色,不需要渐变(设置起始点都为一个颜色,下一个颜色的起点为上一个的终点) background:conic-gradient( #500 0, #500 45deg, #f00 45deg, #f00 90deg, #f50 90deg, #f50 135deg, #ff0 135deg,#ff0 180deg, #0c0 180deg, #0c0 225deg, #09d 225deg, #09d 270deg, #00b 270deg, #00b 315deg, #909 315deg, #909 360deg ); (3)重复锥形渐变 background:repeating-conic-gradient(颜色 渐变开始点,颜色2 渐变开始点2 ,...); 会根据0到最后一个渐变开始点的位置为一个整体,进行顺时针的重复填充 background:conic-gradient(#f00, #f50, #ff0, #0c0, #09d, #03a, #909, #f00);background:conic-gradient(#500 0, #500 45deg,#f00 45deg, #f00 90deg,#f50 90deg, #f50 135deg,#ff0 135deg,#ff0 180deg,#0c0 180deg, #0c0 225deg,#09d 225deg, #09d 270deg,#00b 270deg, #00b 315deg,#909 315deg, #909 360deg
);div{width:200px;height:200px;border-radius:50%;background:conic-gradient(#fc0 0, #fc0 45deg,#59f 45deg);
}background:repeating-conic-gradient(#f00 0, #f00 15deg,#fa0 15deg,#fa0 30deg);
