几种颜色渐变图案中常用的CSS3的总结

1。线性梯度：线性梯度
Grammar：

=线性梯度（{ { | {，} +）
{左=右} { } | | | |顶底
| } = {
下面的值用来表示渐变的方向，可以通过角度或关键字来设置。
梯度的方向（或角度）是由角度值指定的。
左：设置渐变从右到左。相当于：270deg
右：设置渐变从左到右。相当于：90deg
顶部：设置渐变从底部到顶部，相当于：0deg
下：设置渐变从上到下。这相当于：180度。这是默认值，相当于不写的空白。
用于指定渐变的起始和停止颜色：
：指定颜色。
使用长度值指定颜色和复选框的位置。不允许负值。
：指定颜色的位置并用百分比检查。
实例：
{ div
宽度：200px；
身高：100px；
保证金：10px 5px；
边境：1px solid # ddd000；
}
{ # linearstarttoend
浮点数：左；
背景：线性梯度（# FF0000，# 00ff00）；
}
{ # linearpercentage
浮点数：左；
Background: linear-gradient (#0000ff, #ff0000 52%, #00ff00);
}
{ # linearanglepercentage
浮点数：左；
背景：线性梯度（90度，# FF0000 20%，# 00ff00 # 50%，000000 80%）；
}
{ # linearangle
浮点数：左；
背景：线性梯度（30deg，# ffff00 30%，# FF0000，# 00ff00）；
}
{ # lineartopright
浮点数：左；
背景：线性梯度（右上方，# 00ff00，# FF0000 50%，# 0000ff）；
}
径向梯度：径向梯度
Grammar：
的| | 1 = {左中右} { | | 2 | |顶| II中心二|底}
| =圆椭圆
= | { | | }
最近边角=最远侧最远的角落| | |
=
| {，} { 2 }
= |
=径向渐变（{ { | | } {在}，| } { }，{，} +）
确定了中心的位置。如果提供了2个参数，第一个是横坐标，二是纵坐标；如果只有一个设置，第二值默认为50%，即中心
（1）用长度值指定径向梯度中心的横向坐标值，可以是负的。
（1）指定径向梯度中心的横向坐标值和百分比，可以是负的。
（2）径向梯度中心的纵坐标值由长度值指定，可以是负的。
（2）：指定径向梯度中心的纵向坐标值为百分比，可以是负的。
中心（1）：径向梯度中心的横向坐标值设置在中间。
中心（2）：在中间设置径向梯度中心的纵向坐标值。
左：设置左侧的径向梯度中心的横向坐标。
右：设置右侧的径向渐变中心的横向坐标值。
顶部：设置顶部的径向渐变中心的垂直坐标值。
底部：设置底部的径向渐变中心的垂直坐标值。
确定圆的类型
圆：指定一个圆的径向梯度
椭圆：指定椭圆的径向梯度。
圆椭圆|接受此值的大小。
最近的一面：径向梯度的半径长度是从中心到最靠近中心的中心指定的。
最近的角点：径向梯度的半径长度是从中心到中心最近的角度指定的。
最远侧：径向梯度的半径长度从中心到最远侧与中心的中心指定。
最远转角：径向梯度的半径长度是从中心到圆中心最远的角度指定的。
圆接受值作为大小。
指定半径的长度：用长度值圈出径向渐变值。不允许负值。
椭圆接受值作为大小。
长度值用来指定椭圆径向梯度的横向或纵向半径的长度。负值是不允许的。
椭圆径向梯度的横向或纵向半径的长度是按百分比指定的。负值是不允许的。
实例：
{ # radialcentercircle
浮点数：左；
背景：径向渐变（圈在中心，# FF0000，# ffff00，# 00ffff）；
}
{ # radialclosestside
浮点数：左；
背景：径向渐变（圈最亲密的一面，# FF0000，# 00ff00，# ffff00）；
}
{ # radialfarthestside
浮点数：左；
背景：径向渐变（远侧，# FF0000 20%，# ffff00 60%，# 00ff00 80%）；
}
{ # radialrighttop
浮点数：左；
背景：径向渐变（右上方，# FF0000，# ffff00，# 00ff00）；
}
{ # radialradiuscenter
浮点数：左；
背景：径向渐变（最远侧在右上角，# FF0000，# ffff00，# 01fefe）；
}
{ # radialgroup
浮点数：左；
背景：
径向渐变（最远侧在右上角，# FF0000，# ffff00，# 009f00，透明），
径向渐变（左上方，60px # FF0000，# ffff00，# 00ff0e）；
}
三，重复线性梯度：重复线性梯度
语法和参数类似于线性渐变，这里不需要描述。
实例：
# repeatinglinearpercentage {
浮点数：左；
背景：重复线性梯度（# FF0000，# 00ff00 # 10%，000000 15%）；
}
{ # repeatinglinearright
浮点数：左；
背景：重复线性梯度（右，# FF0000，# 00ff00 # 10%，000000 15%）；
}
{ # repeatinglinearangle
浮点数：左；
背景：重复线性梯度（45度，# FF0000，# 00ff00 10%，# 0000ff 15%）；
}
{ # repeatinglinearbottomleft
浮点数：左；
背景：重复线性梯度（左下，# 00ffff，# FF0000 10%，# 00ff00 15%）；
}
四，重复径向梯度：重复径向梯度
语法和参数类似于径向渐变，这里不需要描述。
实例：
{ # repeatingradialcircle
浮点数：左；
背景：重复径向渐变（圆形，# FF0000 0，# 00ff00 10%，# 0000ff 15%）；
}
{ # repeatingradialtopleft
浮点数：左；
背景：重复径向渐变（左上方，# FF0000，# 00ff00 10%，# 0de0f0 15%，# ffff00 # 20%，000000 25%）；
}
{ # repeatingradialclosestcorner
浮点数：左；
背景：重复径向渐变（圈最近的角在20 px 50px，# 00ff00，# FF0000 10%，# 00ffff 20%，# ffff00 30%，# ff00ff 40%）；
}
完整的例子：

imagecss3

{ div
宽度：200px；
身高：100px；
保证金：10px 5px；
边境：1px solid # ddd000；
}
{ # linearstarttoend
浮点数：左；
背景：线性梯度（# FF0000，# 00ff00）；
}
{ # linearpercentage
浮点数：左；
背景：线性梯度（# 0000ff，# FF0000 52%，# 00ff00）；
}
{ # linearanglepercentage
浮点数：左；
背景：线性梯度（90度，# FF0000 20%，# 00ff00 # 50%，000000 80%）；
}
{ # linearangle
浮点数：左；
背景：线性梯度（30deg，# ffff00 30%，# FF0000，# 00ff00）；
}
{ # lineartopright
浮点数：左；
背景：线性梯度（右上方，# 00ff00，# FF0000 50%，# 0000ff）；
}

{ # radialcentercircle
浮点数：左；
背景：径向渐变（圈在中心，# FF0000，# ffff00，# 00ffff）；
}
{ # radialclosestside
浮点数：左；
背景：径向渐变（圈最亲密的一面，# FF0000，# 00ff00，# ffff00）；
}
{ # radialfarthestside
浮点数：左；
背景：径向渐变（远侧，# FF0000 20%，# ffff00 60%，# 00ff00 80%）；
}
{ # radialrighttop
浮点数：左；
背景：径向渐变（右上方，# FF0000，# ffff00，# 00ff00）；
}
{ # radialradiuscenter
浮点数：左；
背景：径向渐变（最远侧在右上角，# FF0000，# ffff00，# 01fefe）；
}
{ # radialgroup
浮点数：左；
背景：
径向渐变（最远侧在右上角，# FF0000，# ffff00，# 009f00，透明），
径向渐变（左上方，60px # FF0000，# ffff00，# 00ff0e）；
}

# repeatinglinearpercentage {
浮点数：左；
背景：重复线性梯度（# FF0000，# 00ff00 # 10%，000000 15%）；
}
{ # repeatinglinearright
浮点数：左；
背景：重复线性梯度（右，# FF0000，# 00ff00 # 10%，000000 15%）；
}
{ # repeatinglinearangle
浮点数：左；
背景：重复线性梯度（45度，# FF0000，# 00ff00 10%，# 0000ff 15%）；
}
{ # repeatinglinearbottomleft
浮点数：左；
背景：重复线性梯度（左下，# 00ffff，# FF0000 10%，# 00ff00 15%）；
}

{ # repeatingradialcircle
浮点数：左；
背景：重复径向渐变（圆形，# FF0000 0，# 00ff00 10%，# 0000ff 15%）；
}
{ # repeatingradialtopleft
浮点数：左；
背景：重复径向渐变（左上方，# FF0000，# 00ff00 10%，# 0de0f0 15%，# ffff00 # 20%，000000 25%）；
}
{ # repeatingradialclosestcorner
浮点数：左；
背景：重复径向渐变（圈最近的角在20 px 50px，# 00ff00，# FF0000 10%，# 00ffff 20%，# ffff00 30%，# ff00ff 40%）；
}

<！-浮动div行，其中指定div宽度和边界以覆盖前面定义的div统一CSS样式。
您可以尝试删除指定的div宽度和边界，请参见>



总结

以上就是本文的全部内容。本文梳理了几种常用的CSS3的方法来实现灰度的颜色，希望能帮助你在你的学习或工作。如果有任何疑问，你可以留言。