CSS3中各种颜色属性的使用教程

前言

CSS3中提供了各种颜色属性，能够让我们更加灵活的控制网页的样式。本教程将会详细讲解如何使用CSS3中的各种颜色属性。

基本颜色名称

CSS3中定义了17个基本颜色名称，分别为：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

p{
    color: red;
    background-color: yellow;
}

上面的代码将会使所有的p标签文本以红色呈现，背景色为黄色。

RGBA和HSLA颜色

CSS3中除了使用16进制颜色，我们也可以使用RGBA和HSLA颜色。其中，RGBA颜色使用红绿蓝与透明度来定义颜色，HSLA颜色使用色相、饱和度、亮度和透明度来定义颜色。

p {
    background-color: rgba(255, 99, 71, 0.5);
}

h1 {
    background-color: hsla(9, 100%, 64%, 0.5);
}

上面的代码将会使所有的p标签背景色以半透明的红色呈现，h1标签背景色以半透明的橙色呈现。

渐变颜色

CSS3中可以使用渐变颜色，分为线性渐变和径向渐变。其中，线性渐变可以设置方向和色标，径向渐变可以设置半径和色标。

.header{
    background: linear-gradient(to right, red, yellow);
}

.footer{
    background: radial-gradient(circle, green, blue);
}

上面的代码将会使.header元素的背景为从左往右变化的从红色到黄色的线性渐变，.footer元素的背景为从内圆渐变到外圆的从绿色到蓝色的径向渐变。

总结

以上就是CSS3中各种颜色属性的使用教程。CSS3中通过使用这些属性，可以让我们更加灵活的控制网页的样式。