渐变产生的是图像,所以需要使用 background
线性渐变
linear-gradient(方向,开始颜色,位置,颜色2,位置,颜色3,位置…)
方向:
to top:0deg
to right:90deg
to bottom:180deg-----默认值
to left:270deg
下面附上一张关于角度的图(源于网络)
下面给盒子添加宽高和 to right(向右)的渐变
background: linear-gradient(to right,red,blue);
下面是 to right bottom 即 45deg
background: linear-gradient(45deg,yellow 0%,red 50%,blue 50%,blue 100%);
径向渐变
radial-gradient(形状,大小,坐标,颜色1,颜色2…)
形状shape:默认值ellipse(椭圆形)
circle(圆形) ---->产生正方形的渐变色
ellipse(椭圆形) ---->适配当前的形状,如果是正方形的容器,两者效果一样,如果宽高不一样,默认效果切换到ellipse
大小size(渐变中心点:与最近(远)边有相切;与最近 (远)角有相交):默认是最远角---->farthest-corner
closest-side ---->最近边
farthest-side ---->最远边
closest-corner---->最近角
farthest-corner ---->最远角
坐标at position:默认在正中心,可以赋值坐标(参照:元素的左上角)也可以赋值关键字(left center right top bottom)
给盒子添加宽300px,高200px,默认值形状ellipse(椭圆形),渐变中心点默认位置在正中心
background: radial-gradient(red,blue);
circle(圆形渐变),渐变中心点默认位置在正中心
background: radial-gradient(circle,red,blue);
位置:left top(渐变中心点在左上角),默认形状ellipse(椭圆)
background: radial-gradient(at left top,red,blue);
4个 ‘’大小size‘’ 的图解,渐变中心点位置在以左上角为参照的 x为50px,y为50px,渐变颜色为红–蓝--黑,例:
background: radial-gradient(circle closest-side at 50px 50px,red,blue,black);
设置颜色的位置,默认形状ellipse(椭圆形)
background: radial-gradient(red 0%,red 50%,blue 50%,blue 100%);
重复渐变
重复径向渐变:
repeating-radial-gradient
利用设置上面一个设置颜色的方式进行重复
div {
width: 300px;
height: 300px;
background: repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
利用重复径向渐变也可以做到一个类似于铅球(是不是很好玩)
div {
width: 300px;
height: 300px;
background: repeating-radial-gradient(circle closest-side at center center,
#fff,#000);
}
唱片纹理(取自https://codepen.io/thebabydino/embed/HjJlL)
div {
position: relative;
width: 262px; height: 262px;
border-radius: 50%;
background:
linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
}
div::after {
position: absolute;
top: 50%; left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px; height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
content: '';
}
重复线性渐变:
repeating-linear-gradient
div {
width: 200px;
height: 400px;
background: repeating-linear-gradient(45deg,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}