【CSS 渐变Gradient详解】线性渐变、径向渐变、锥形渐变及重复渐变-beat365下载唯一官方网-365bet体育注册开户-必发365手机app-beat365下载唯一官方网

渐变 gradient

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients

CSS 属性值定义语法 https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle https://developer.mozilla.org/zh-CN/docs/Web/CSS/image https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-interpolation-method https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Types

CSS 数据类型是的一种特殊类型，包含两种或多种颜色的过渡转变。渐变可以在任何使用的地方使用，例如在背景中。渐变没有内在尺寸，实际大小取决于所应用的元素的大小。

线性渐变 🔗

由 linear-gradient()函数创建，在一个假想的直线上进行线性过渡的图像。

💠 语法：linear-gradient( ｜ to (可选) , );

✋🏻 ｜ to (可选)

👉🏻 默认情况下，线性渐变的方向是从上到下,可以指定一个值来改变渐变的方向。

：渐变线的起始点位置。

如果指定了，则包含 to 和两个关键字：

一个指定水平位置（left 或 right），另一个指定竖直位置（top 或 bottom）。关键词的先后顺序无影响。如果没有指定，则默认为 to bottom。

to top、to bottom、to left 和 to right 分别等价于0deg、180deg、270deg 和 90deg。其余值会被转换为角度。 .bg-linear2 {

}

.bg-linear3 {

}

.bg-linear4 {

}

.bg-linear5 {

}

.bg-linear7 {

}

.bg-linear8 {

}

.bg-linear9 {

}

.bg-linear10 {

}

默认

to right

to left

to top

to bottom

对角线:to bottom left

对角线:to bottom right

对角线:to top left

对角线:to top right

🔗：渐变线的方向的角度。

0deg 等价于 to top，增加值相当于顺时针旋转。

.bg-linear11 {

}

.bg-linear12 {

}

.bg-linear13 {

}

.bg-linear133 {

}

.bg-linear14 {

}

.bg-linear15 {

}

渐变角度：0deg

渐变角度：45deg

渐变角度：90deg

渐变角度：90grad

渐变角度：135deg

渐变角度：0.25turn

✋🏻 : = , [ ? , ]#

: 色标的值，然后是一个或两个可选的色标位置（沿渐变轴的百分比或绝对长度值）。

💛 色标（color stop）: 要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标。至少指定两个色标，也可以指定任意数量。色标位置：可以为径向和线性渐变设置 0、1 或 2 个百分比值或者绝对长度值来调整它们的位置。

如果将位置设置为百分数，0% 表示起始点，而 100% 表示终点。如果有些位置不需要明确设置，那么将会自动计算，第一个色标在 0% 处，最后一个色标在 100%，其他的色标则位于其相邻的两个色标中间。 linear-color-hint : 百分比（percentage）或长度（length）值。

插值提示，定义渐变色在相邻色标之间的渐变过程。

其中的长度定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。

如果省略该值，颜色过渡的中点就是两个色标之间的中点。 /* 指定色标 */

/* 要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。 */

.bg-linear16 {

background-image: linear-gradient(#8A2387 10px, #E94057 10px 30px, #F27121 30px);

}

.bg-linear16-1 {

}

.bg-linear17 {

background-image: linear-gradient(45deg, #8A2387 0 50%, #E94057 50% 70%, #F27121 0);

}

.bg-linear18 {

}

linear-gradient(#8A2387 10px, #E94057 10px 30px, #F27121 30px)

linear-gradient(#8A2387 10px, #E94057 30px, #F27121 30px)

linear-gradient(45deg, #8A2387 0 50%, #E94057 50% 70%, #F27121 0)

linear-gradient(45deg, #8A2387 50%, #E94057 70%, #F27121)

🥰 透明色 transparent 🔗:利用透明色的特性，结合background实现更多样式的图像。

.bg-linear19 {

}

.bg-linear20 {

background-image: linear-gradient(#8A2387 0 5px, #E94057 5px 10%, transparent 50%, #F27121 50% 100%);

}

.bg-linear21 {

}

.bg-linear22 {

background-color: #ECEFF1;

background-size: auto;

background-position: top right;

background-repeat: no-repeat;

}

/* 渐变叠加 */

.bg-linear23 {

linear-gradient(-45deg, #F27121 0 50%, transparent 0),

linear-gradient(135deg, #E94057 0 50%, transparent 0),

linear-gradient(-135deg, #76FF03 0 50%, transparent 0);

background-blend-mode: saturation;

background-size: 50% 50%;

background-position: bottom left, bottom right, top left, top right;

background-repeat: no-repeat;

}

.bg-linear24 {

background-color: #ECEFF1;

linear-gradient(-45deg, transparent 50%, #8A2387 50%),

linear-gradient(135deg, transparent 0 50%, #76FF03),

linear-gradient(-135deg, transparent 0 50%, #76FF03);

background-size: 50% 50%;

background-position: bottom left, bottom right, top left, top right;

background-repeat: no-repeat;

}

linear-gradient(#8A2387, #E94057, #F27121, transparent)

linear-gradient(#8A2387 0 5px, #E94057 5px 10%, transparent 50%, #F27121 50% 100%)

linear-gradient(45deg, #8A2387 0 50%, #E94057 0)

linear-gradient(0.125turn, transparent 75%, #F27121 75%)

linear-gradient(45deg, #8A2387 0 50%, transparent 0),


linear-gradient(-45deg, #F27121 0 50%, transparent 0),
linear-gradient(135deg, #E94057 0 50%, transparent 0),

linear-gradient(-135deg, #76FF03 0 50%, transparent 0);

🤔 小案例：电视没信号

...

❤️‍🔥 线性重复渐变 repeating-linear-gradient() 🔗

💚 repeating-linear-gradient() 创建一个能够重复填满容器的线性渐变。

重复渐变的长度是第一个色标和最后一个色标之间的距离

如果第一种颜色没有色标长度，则色标长度默认为 0。

每次重复时，色标的位置都会以基本线性渐变长度的倍数移动。

因此，每个结束色标的位置都会与起始色标的位置重合；

如果色值不同，就会产生鲜明的视觉过渡。

可以通过重复第一种颜色值作为最后一种颜色值来改变这种情况。 .bg-linear25 {

background-image: repeating-linear-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 40px);

}

.bg-linear26 {

background-image: repeating-linear-gradient(45deg, #8A2387, #E94057 15%, #F27121 20%);

}

.bg-linear27 {

background: repeating-linear-gradient(transparent, rgba(236, 64, 122, 0.5) 10px, transparent 10px 20px),

repeating-linear-gradient(transparent, rgba(236, 64, 122, 0.8) 10px);

}

repeating-linear-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 40px)

repeating-linear-gradient(45deg, #8A2387, #E94057 15%, #F27121 20%)

repeating-linear-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 40px)

🤔 小案例：进度条

......

径向渐变 🔗

由 radial-gradient() 函数创建，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。

🔸 径向渐变没有内在尺寸，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。

😶‍🌫️ radial-gradient(circle at center, red 0, blue, green 100%) 表示在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色

💠 语法 : radial-gradient( [ ] )

radial-gradient() 函数接收一个参数。

= [ || ]? [ at ]? ,

[ <结束形状> || <大小> ]？[at <位置>]？,<色标列表>

径向渐变通过指定渐变的中心（0% 椭圆所在的位置）和结束形状（100% 椭圆）的大小和形状来指定。

🤖 值详解：

: 渐变结束时的形状。

两个值 circle | ellipsecircle: 圆形，渐变的形状是一个半径不变的正圆ellipse 椭圆，渐变形状是轴对称椭圆。 -如果没有指定，默认为ellipse。 .box {

width: 300px;

height: 100px;

margin: 20px 0;

}

.box2 {

width: 200px;

height: 200px;

margin: 20px 0;

}

...

radial-gradient(#8A2387, #E94057, #F27121)

radial-gradient(#8A2387 10%, #E94057 30%, #F27121 70%)

radial-gradient(circle, #8A2387 10%, #E94057 30%, #F27121 70%)

radial-gradient(circle, #8A2387, #E94057, #F27121)

radial-gradient(#8A2387 10%, 30%, #E94057 30% 70%, #F27121 70%)

radial-gradient(circle, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0)

:定义了渐变的尺寸。确定渐变结束形状的大小，它决定了渐变的大小如何相对于其容器。

如果省略，则默认为最远角（farthest-corner）。

它可以显式给出，也可以通过关键字给出。

就关键字定义而言，渐变框边缘应视为向两个方向无限延伸，而不是有限线段。 🍑 关键字

关键字描述closest-side渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。closest-corner渐变结束形状与容器距离渐变中心点最近的一个角相交。farthest-side类似于 closest-side，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。farthest-corner默认值，渐变的结束形状与容器距离渐变中心点最远的一个角相交。 🍑 长度值和百分比

🙌🏻 如果 ending-shape 被指定为 circle，则可以为大小指定一个长度值，它明确了圆的半径。负值是无效的。🙌🏻 如果 ending-shape 被指定为 ellipse，则可以使用带有两个值的长度或百分比来指定椭圆的大小。

第一个值表示水平半径，第二个值表示垂直半径。百分比值是相对于渐变框在相应维度上的大小的。负值是无效的。🙌🏻 如果 ending-shape 关键词被省略，渐变形状会由给定的大小决定。

一个长度值产生圆两个长度或者百分比单位的值产生椭圆。一个百分比值是无效的。

...

radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)

radial-gradient(circle 40px, #8A2387 0 30px, #E94057 30px 40px, transparent 40px 100%)

radial-gradient(40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)

radial-gradient(ellipse 40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)

radial-gradient(40% 40%, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)

radial-gradient(ellipse 40% 100px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0)

radial-gradient(circle 40px, #8A2387 0 30px, #E94057 30px 40px, transparent 40px 100%)

radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0)

radial-gradient(ellipse 40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)

radial-gradient(40% 40%, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)

radial-gradient(ellipse 40% 100px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

...

radial-gradient(closest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(circle closest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(closest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(circle closest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(farthest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(circle farthest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(farthest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(circle farthest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

at :position定义渐变的中心位置。没有指定，默认为center

position的值：可以是任意合法的CSS定位值，百分比、像素值、关键字等

如果存在，否则就是从左侧位置和顶部位置开始的）以指定渐变的中心

radial-gradient(at top, #8A2387, #E94057, #F27121)

radial-gradient(40px at top left, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(closest-side at center, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(200px 100px at left top, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(200px 100px at bottom, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(200px 100px at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(circle at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(at 30px 30px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(at top, #8A2387, #E94057, #F27121)

radial-gradient(40px at top left, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(closest-side at center, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(200px 100px at left top, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(200px 100px at bottom, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(200px 100px at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(circle at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

radial-gradient(at 30px 30px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)

color-stop-list : 和线性渐变值相似

❤️‍🔥 重复径向渐变 repeating-radial-gradient() 🔗

💚 repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的图形。

它会在所有方向上无限重复色标，以覆盖其整个容器

...

repeating-radial-gradient(#8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 30px)

repeating-radial-gradient(circle at 50% 0, #8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(at bottom left, #8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(circle at bottom right, #8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(at top right, #8A2387 0, #E94057, transparent, #F27121 50%)


repeating-radial-gradient(at top left, #E94057, #F27121 30%),
repeating-radial-gradient(at top right, #D3CCE3, #E9E4F0 10%),
repeating-radial-gradient(at bottom left, #2193b0, #6dd5ed 12.5%),
repeating-radial-gradient(at bottom right, #f5af19 0, transparent, #f5af19 45%);

repeating-radial-gradient(#000 0 5%, #fff 5% 10%)

repeating-radial-gradient(#8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 30px)

repeating-radial-gradient(circle at 50% 0, #8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(at bottom left, #8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(circle at bottom right, #8A2387 0, #E94057, #F27121 30px)

repeating-radial-gradient(at top right, #8A2387 0, #E94057, transparent, #F27121 50%)


repeating-radial-gradient(at top left, #E94057, #F27121 30%),
repeating-radial-gradient(at top right, #D3CCE3, #E9E4F0 10%),
repeating-radial-gradient(at bottom left, #2193b0, #6dd5ed 12.5%),
repeating-radial-gradient(at bottom right, #f5af19 0, transparent, #f5af19 45%);

repeating-radial-gradient(#000 0 5%, #fff 5% 10%)

锥形渐变 🔗

由 conic-gradient() 函数创建，创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。

😶‍🌫️ 锥形渐变的例子包括饼图和色轮，但是也可以用于创建棋盘格和其他有趣的效果。

🔸 锥形渐变的语法和径向渐变的语法类似，但是色标是围绕渐变弧（圆的圆周）进行的，而不是从渐变中心出现的渐变线上，并且色标是百分比或度数：绝对长度无效。

🔸 默认情况下，渐变的中心位于 50% 50% 的位置，渐变的开始点是朝上的。 conic-gradient(#8A2387, #E94057, #F27121)

💠 语法 : conic-gradient( [ ] )

conic-gradient()函数接受一个参数

[ [ [ from ]? [ at ]? ] || ]? ,

🤖 值详解：

from : 定义了锥形渐变的角度起点，以角度作为单位（0 到 360）。

默认值为 0，定义顺时针方向的渐变旋转。的取值 🔗 - deg : 度。一个完整的圆是 360deg。 - grad : 百分度。一个完整的圆是 400grad。 - rad : 弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度 => 180 deg = 1rad * π 。 - turn : 圈数。一个完整的圆是 1turn。 45deg = 50grad = 1/4π = 6.2832rad/8 = 1/8 turn

conic-gradient(from 45deg, #8A2387, #E94057, #F27121)

conic-gradient(from 50grad, #8A2387, #E94057, #F27121)

conic-gradient(from calc(6.2832rad/8), #8A2387, #E94057, #F27121)

conic-gradient(from 0.125turn, #8A2387, #E94057, #F27121)

conic-gradient(from -0.125turn, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg, #8A2387, #E94057, #F27121)

conic-gradient(from 50grad, #8A2387, #E94057, #F27121)

conic-gradient(from calc(6.2832rad/8), #8A2387, #E94057, #F27121)

conic-gradient(from 0.125turn, #8A2387, #E94057, #F27121)

conic-gradient(from -0.125turn, #8A2387, #E94057, #F27121)

at : 定义了渐变的中心位置。这里的可以是任意合法的CSS定位值，如百分比、像素值、关键字等。

如果省略，默认值是 center，表示渐变是居中的。。

conic-gradient(at top, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg at left, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg at 50% 30%, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg at 50px 50px, #8A2387, #E94057, #F27121)

conic-gradient(at top, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg at left, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg at 50% 30%, #8A2387, #E94057, #F27121)

conic-gradient(from 45deg at 50px 50px, #8A2387, #E94057, #F27121)

🔗（可选）

CSS 数据类型表示用于在值之间插值的颜色空间。 = in [ | ? ]

指定了插值应使用直角坐标颜色空间还是带可选色相插值方法的极坐标颜色空间 in /* 或者 */ in [ ]取值：

rectangular-color-space : 关键字 srgb、srgb-linear、lab、oklab(默认值)、xyz、xyz-d50 或 xyz-d65 之一。

conic-gradient(in srgb, #8A2387, #E94057, #F27121)

conic-gradient(in srgb-linear, #8A2387, #E94057, #F27121)

conic-gradient(in lab, #8A2387, #E94057, #F27121)

conic-gradient(in oklab, #8A2387, #E94057, #F27121)

conic-gradient(in xyz, #8A2387, #E94057, #F27121)

conic-gradient(in xyz-d50, #8A2387, #E94057, #F27121)

conic-gradient(in xyz-d65, #8A2387, #E94057, #F27121)

conic-gradient(in srgb, #8A2387, #E94057, #F27121)

conic-gradient(in srgb-linear, #8A2387, #E94057, #F27121)

conic-gradient(in lab, #8A2387, #E94057, #F27121)

conic-gradient(in oklab, #8A2387, #E94057, #F27121)

conic-gradient(in xyz, #8A2387, #E94057, #F27121)

conic-gradient(in xyz-d50, #8A2387, #E94057, #F27121)

conic-gradient(in xyz-d65, #8A2387, #E94057, #F27121)

polar-color-space : 关键字 hsl、hwb、lch 或 oklch

hue-interpolation-method 🔗 可选 :用于色相插值的算法。默认为 shorter hue

[ shorter | longer | increasing | decreasing ] hue

conic-gradient(in hsl, blue, red)

conic-gradient(in hsl longer hue, blue, red)

conic-gradient(in hsl increasing hue, blue, red)

conic-gradient(in hsl decreasing hue, blue, red)

conic-gradient(in hwb, blue, red)

conic-gradient(in hwb longer hue, blue, red)

conic-gradient(in hwb increasing hue, blue, red)

conic-gradient(in hwb decreasing hue, blue, red)

conic-gradient(in lch, blue, red)

conic-gradient(in lch longer hue, blue, red)

conic-gradient(in lch increasing hue, blue, red)

conic-gradient(in lch decreasing hue, blue, red)

conic-gradient(in oklch, blue, red)

conic-gradient(in oklch longer hue, blue, red)

conic-gradient(in oklch increasing hue, blue, red)

conic-gradient(in oklch decreasing hue, blue, red)

angular-color-stop-list : 定义了一系列颜色及其在渐变中的位置。每个颜色后面跟着一个百分比或长度值来指定该颜色在渐变中出现的位置。

= , [ ? , ]#

: 色标（color stop）的值，然后是一个或两个可选的色标位置（沿着渐变圆周轴的）。

: 插值提示，定义了在相邻色标之间的渐变如何进行。

这个长度定义了渐变色应在两个色标之间的哪一点到达颜色过渡的中点。如果省略，颜色过渡的中点是两个色标之间的中点。

conic-gradient(from 65deg at bottom left, #8A2387, #E94057, #F27121 33deg)

conic-gradient(from 60deg at left center, #8A2387 20deg, #E94057 30deg, #F27121 60deg)

conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg 45deg,

green 45deg 110deg, blue 110deg 200deg, purple 200deg)

conic-gradient(#fff 0 0.25turn, #000 91deg 0.5turn, #fff


181deg

270deg, #000 271deg 360deg)

background-size: 25px 25px;

conic-gradient(from 65deg at bottom left, #8A2387, #E94057, #F27121 33deg)

conic-gradient(from 60deg at left center, #8A2387 20deg, #E94057 30deg, #F27121 60deg)

conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg


45deg,

green 45deg 110deg, blue 110deg 200deg, purple 200deg)

conic-gradient(#fff 0 0.25turn, #000 91deg 0.5turn, #fff


181deg

270deg, #000 271deg 360deg)

background-size: 25px 25px;

❤️‍🔥 重复锥形渐变 repeating-conic-gradient() 🔗

💚 repeating-conic-gradient 是 CSS3 中的一个函数，用于创建重复的圆锥渐变。这种类型的渐变可以用于创建环状、螺旋状或其他基于角度的颜色过渡效果。

与线性渐变和径向渐变不同，圆锥渐变是沿着一个角度或方向进行的，并且颜色在每个 360 度周期内都会重复。

repeating-conic-gradient(#fff 0 0.25turn, #000 91deg

0.5turn)

repeating-conic-gradient(#fff 0 0.25turn, #000 91deg

0.5turn)

repeating-conic-gradient(red 0%, yellow 15%, red 33%)

repeating-conic-gradient(from 45deg at 10% 50%,


brown 0deg 10deg,
darkgoldenrod 10deg 20deg,

chocolate 20deg 30deg)

repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg)

rrepeating-conic-gradient(in hsl longer hue,


red,

blue 180deg)

repeating-conic-gradient(from 3deg at 25% 25%,


green,
blue 2deg 5deg,
green,
yellow 15deg 18deg,

green 20deg)

【CSS 渐变Gradient详解】线性渐变、径向渐变、锥形渐变及重复渐变

相关推荐

抖啦咪app是正规的平台吗？抖啦咪是不是诈骗软件？如何注册使用？

俄罗斯无缘世界杯莱万受益，细数世界足球史上的“制裁”之痛

1摄氏度等于多少开氏度

怎样关闭wps(wps怎么关闭)

三星Galaxy Tab S2平板上手：国行2888元起

德国视频

友情链接