您可以尝试运行以下代码来在 CSS3 中实现多色渐变：示例在线演示                    #grad2 {             height: 100px;             background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);             background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);             background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);             background: linear-gradient(red, orange, yellow, red, blue, green,pink);          }                        

HSL 代表色相、饱和度、亮度。其中，色相是色轮的度数，饱和度和亮度是 0% 到 100% 之间的百分比值。示例以下示例显示了 HSL 颜色属性：在线演示                    #g1 {background-color:hsl(120, 100%, 50%);}          #g2 {background-color:hsl(120,100%,75%);}          #g3 {background-color:hsl(120,100%,25%);}                     HSL 颜色：       绿色       常规绿色       深绿色    

您可以尝试运行以下代码来在 CSS3 中实现重复径向渐变：示例在线演示                    #grad1 {             height: 100px;             width: 550px;             background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);             background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);             background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);             background: repeating-radial-gradient(blue, yellow 10%, green 15%);          }                        

径向渐变出现在中心。您可以尝试运行以下代码来在 CSS3 中实现径向渐变：示例在线演示                    #grad1 {             height: 100px;             width: 550px;             background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);             background: -o-radial-gradient(red 5%, green 15%, pink 60%);             background: -moz-radial-gradient(red 5%, green 15%, pink 60%);             background: radial-gradient(red 5%, green 15%, pink 60%);          }                        

您可以尝试运行以下代码来使用 CSS 旋转带有 Y 轴倾斜的 div：示例在线演示                    div {              width: 300px;              height: 100px;              background-color: pink;              border: 1px solid black;           }           div#skewDiv {              /* IE 9 */              -ms-transform: skewY(20deg);              /* Safari */              -webkit-transform: skewY(20deg);              /* Standard syntax */              transform: skewY(20deg);           }                              欢迎访问我的网站。                      欢迎访问我的网站。          

线性渐变用于像从上到下那样以线性格式排列两种或多种颜色。示例您可以尝试运行以下代码来在 CSS3 中实现线性渐变：在线演示                    #grad1 {             height: 100px;             background: -webkit-linear-gradient(pink,green);             background: -o-linear-gradient(pink,green);             background: -moz-linear-gradient(pink,green);             background: linear-gradient(pink,green);          }                                

不透明度是较薄的油漆需要添加黑色以增加不透明度。以下示例显示了 CSS3 不透明度属性：示例在线演示 #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {background-color:rgb(0,0,255);opacity:0.6;} HSLA 颜色：红色 绿色 蓝色

HSLA 代表色相、饱和度、亮度和 alpha。alpha 值指定不透明度，如 RGBA 所示。示例以下示例显示了 HSLA 颜色属性：在线演示                    #d1 {background-color:hsla(120,100%,50%,0.3);}          #d2 {background-color:hsla(120,100%,75%,0.3);}          #d3 {background-color:hsla(120,100%,25%,0.3);}                     HSLA 颜色：       低透明度绿色       绿色       绿色    

使用 rotate(angle) 方法使用 CSS3 沿 Y 轴旋转变换元素：示例在线演示                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#yDiv {             -webkit-transform: rotateY(150deg);             /* Safari */             transform: rotateY(150deg);             /* Standard syntax */          }                              tutorials point.com                旋转 Y 轴                tutorials point.com.          

使用 rotateX(angle) 方法使用 CSS3 沿 X 轴旋转变换元素：示例在线演示                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv {             -webkit-transform: rotateX(150deg);             /* Safari */             transform: rotateX(150deg);             /* Standard syntax */          }                              tutorialspoint.com             旋转 X 轴                tutorialspoint.com