CSS3 颜色样式

261 阅读4分钟

在 CSS3 中,增加了大量定义颜色方面样式的属性,主要包括:opacity 透明度、RGBA 颜色、CSS3 渐变。

一、opacity 透明度

此属性取值是一个数值,在 0-1 之间,0 为完全透明,1 为不透明,示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div:first-child{
                height: 100px;
                width: 100px;
                background-color: rgb(255,201,198);
                opacity: 1;
            }
            div:nth-child(2){
                height: 100px;
                width: 100px;
                background-color: rgb(255,201,198);
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
</html>

两个同样颜色的块,只是改了透明度,效果便不同:

image.png

opacity 不仅作用于背景,还作用于内部的所有内容。

二、RGBA 颜色

RGB 是一种色彩标准,由红绿蓝三种颜色变化来得到各种颜色,RGBA 就是在 RGB 的基础上增加了一个透明度通道 Alpha.

R、G、B 这三个可以为整数,取值范围为 0-255,也可以为百分比,取值范围为 0-100%;参数 A 为透明度,取值为 0-1,示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div:first-child{
                height: 100px;
                width: 100px;
                background-color: rgba(255,201,198,1);
            }
            div:nth-child(2){
                height: 100px;
                width: 100px;
                background-color: rgba(255,201,198,0.3);
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
</html>

在浏览器中显示为:

image.png

RGBA 与 opacity 的区别:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div:first-child{
                height: 100px;
                width: 100px;
                background-color: rgba(255,201,198,0.3);
            }
            div:nth-child(2){
                height: 100px;
                width: 100px;
                background-color: rgb(255,201,198);
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
        <div>rgba</div>
        <div>opacity</div>
</html>

可见,RGBA 仅作用于对应的背景颜色,而 opacity 作用于整块内容(包括其内的所有元素)

image.png

三、CSS3 渐变

在 CSS3 中,有两种渐变,一种是线性渐变,另外一种是径向渐变。

1、线性渐变

线性渐变指的是在一条直线上进行的渐变,我们见到的大多数渐变效果都是线性渐变,语法:

background:linear-gradient(方向,开始颜色,结束颜色)

线性渐变的方向取值有两种,一种是使用角度(单位为 deg),另外一种是使用关键字,如下表所示:

属性值对应角度说明
to top0 deg从下到上
to bottom180 deg从上到下(默认)
to left270 deg从右到左
to right90 deg从左到右
to top left从右下角到左上角
to top right从左下角到右上角

示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                background:linear-gradient(to right,rgb(245, 99, 99),rgb(248, 203, 119),yellow);
            }
        </style>
    </head>
    <body>
        <div></div>
</html>

浏览器中效果如下:

image.png

其中,开始颜色和结束颜色可以使用颜色名称,也可以使用 RGB 颜色,也可以是一个值列表,表示从第一个颜色渐变到最后一个颜色,中间用逗号隔开。

2、径向渐变

径向渐变指的是颜色从内到外进行的圆形渐变,径向渐变是圆形渐变或者椭圆渐变,颜色不沿着一条直线渐变,而是从一个起点向所有方向渐变。

语法:

background:radial-gradient(position,shape size,start-color,stop,color)

position 用来定义圆心的位置,shape size 用于定义形状的大小,shape 定义形状,size 定义大小,start-color 和 stop-color 用于定义开始颜色和结束颜色。

其中 position 和 shape size 都是可选参数,省略为默认值。

圆心位置 position

参数 position 用于定义径向渐变的圆心位置,常用物质有两种,一种是长度值(10px),另一种是关键字(如 top、center、bottom、left、right 或者两两组合)

示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
            }
            .div1{
                background: -webkit-radial-gradient(center,green,yellow);
            }
            .div2{
                background: -webkit-radial-gradient(top,green,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
</html>

可以看到,第一个 div 的中心在中间位置,第二个 div 的中心在上部,都是通过 position 属性设置的:

image.png

shape size

参数 shape 用于定义径向渐变的形状,而参数 size 定义径向渐变的大小。

shape 的取值如下:

属性值说明
ellipse椭圆形(默认值)
circle圆形

size 的取值如下:

属性值说明
closest-size指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner指定径向渐变的半径长度为从圆心到离圆心最远的角

当 shape 不同时,有如下示例:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                height: 100px;
                width: 200px;
                display: table-cell;
                color: white;
                text-align: center;
                vertical-align: middle;
            }
            .div1{
                background: -webkit-radial-gradient(circle,green,yellow);
            }
            .div2{
                background: -webkit-radial-gradient(ellipse,green,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1">circle</div>
        <div class="div2">ellipse</div>
</html>

div1 为圆形,div2 为椭圆形:

image.png

当 size 不同时,示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                height: 100px;
                width: 200px;
                display: table-cell;
                color: white;
                text-align: center;
                vertical-align: middle;
            }
            .div1{
                background: -webkit-radial-gradient(circle closest-side,green,yellow);
            }
            .div2{
                background: -webkit-radial-gradient(circle closest-corner,green,yellow);
            }
            .div3{
                background: -webkit-radial-gradient(circle farthest-side,green,yellow);
            }
            .div4{
                background: -webkit-radial-gradient(circle farthest-corner,green,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1">closest-side</div>
        <div class="div2">closest-corner</div>
        <div class="div3">farthest-side</div>
        <div class="div4">farthest-corner</div>
</html>

在浏览器中的效果为:

image.png

start-color 和 stop-color

用这两个值来定义开始颜色和结束颜色,径向渐变也接受一个值列表,用于定义多个颜色的径向渐变。在通常情况下,多颜色的径向渐变的颜色分布是均匀的,但我们可以给颜色添加百分比,使得颜色不均匀分布,示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                display: table-cell;
                color: white;
                text-align: center;
                vertical-align: middle;
            }
            .div1{
                background: -webkit-radial-gradient(circle,green 5%,red 30%,yellow 65%);
            }
            .div2{
                background: -webkit-radial-gradient(circle,green,red,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1">非均匀分布</div>
        <div class="div2">均匀分布</div>
</html>

在浏览器中效果如下:

image.png

一般来说,最常用的还是线性渐变。