在 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>
两个同样颜色的块,只是改了透明度,效果便不同:
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>
在浏览器中显示为:
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 作用于整块内容(包括其内的所有元素)
三、CSS3 渐变
在 CSS3 中,有两种渐变,一种是线性渐变,另外一种是径向渐变。
1、线性渐变
线性渐变指的是在一条直线上进行的渐变,我们见到的大多数渐变效果都是线性渐变,语法:
background:linear-gradient(方向,开始颜色,结束颜色)
线性渐变的方向取值有两种,一种是使用角度(单位为 deg),另外一种是使用关键字,如下表所示:
属性值 | 对应角度 | 说明 |
---|---|---|
to top | 0 deg | 从下到上 |
to bottom | 180 deg | 从上到下(默认) |
to left | 270 deg | 从右到左 |
to right | 90 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>
浏览器中效果如下:
其中,开始颜色和结束颜色可以使用颜色名称,也可以使用 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 属性设置的:
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 为椭圆形:
当 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>
在浏览器中的效果为:
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>
在浏览器中效果如下:
一般来说,最常用的还是线性渐变。