您可以尝试运行以下代码，在 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 旋转 div 并倾斜 y 轴：示例在线演示                    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);              /* 标准语法 */              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) 方法围绕 y 轴旋转变换元素，使用 CSS3：示例在线演示                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#yDiv {             -webkit-transform: rotateY(150deg);             /* Safari */             transform: rotateY(150deg);             /* 标准语法 */          }                              tutorials point.com                旋转 Y 轴                tutorials point.com.          

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