opacity透明度
语法
div{opacity:数值;}
- opacity属性的取值范围为0.0~1.0。其中0.0表示完全透明,1.0表示完全不透明。
- opacity属性不仅作用于元素的背景颜色,还会作用于内部所有子元素以及文本内容。
RGBA颜色
RGB是一种色彩标准,由红(Red)、绿(Green)、蓝(Blue)3种颜色变化来得到各种颜色。而RGBA是在RGB基础上增加了一个透明度通道Alpha。
语法
div{background-color:rgba(R, G, B, A);}
div{background-color:rgba(255, 255, 0, 0.5);}
div{background-color:rgba(50%, 80%, 50%, 0.5);}
R,指的是红色值(Red);G,指的是绿色值(Green);B,指的是蓝色值(Blue);A,指的是透明度(Alpha)。R、G、B这三个参数可以为整数,取值范围为0~255,也可以为百分比,取值范围为0%~100%。参数A为透明度,跟opacity属性是一样的,取值范围为0.0~1.0。
渐变
线性渐变linear-gradient
语法
div{background:linear-gradient(方向, 开始颜色, 结束颜色);}
线性渐变的“方向”取值有两种:
- 一种是使用角度(单位为deg)
- 另一种是使用关键字
线性渐变的“方向”取值 |
||
属性值 |
对应角度 |
说明 |
to top |
0deg |
从下到上 |
to bottom |
180deg |
从上到下(默认值) |
to left |
270deg |
从右到左 |
to right |
90deg |
从左到右 |
to top left |
无 |
从右下角到左上角(斜对角) |
to top right |
无 |
从左下角到右上角(斜对角) |
线性渐变也可以接受一个“值列表”,用于同时定义多种颜色的线性渐变,颜色值之间用英文逗号隔开即可。
径向渐变radial-gradient
语法
div{background:radial-gradient(position, shape size, start-color, stop-color);}
div{background:radial-gradient((center, orange, blue));}
- position用于定义圆心位置。shape size用于定义形状大小,由两部分组成,shape定义形状,size定义大小。start-color和stop-color分别用于定义开始颜色和结束颜色。
- 其中,position和shape size都是可选参数。如果省略,则表示采用默认值。start-color和stop-color都是必选参数,可以有多个颜色值。
圆心位置position
position常用取值有两种:一种是“长度值”(如10px),另一种是“关键字”
属性值 |
说明 |
center |
中部(默认值 |
top |
顶部 |
bottom |
底部 |
left |
左部 |
right |
右部 |
top center |
靠上居中 |
top left |
左上 |
top right |
右上 |
left center |
靠左居中 |
center center |
正中 |
right center |
靠右居中 |
bottom left |
左下 |
bottom center |
靠下居中 |
bottom right |
右下 |
形状 shape size
参数shape取值 |
|
属性值 |
说明 |
ellipse |
圆形(默认值) |
circle |
圆形 |
参数size取值 |
|
属性值 |
说明 |
closet-side |
指定径向渐变的半径长度为从圆心到离圆心最近的边 |
closet-corner |
指定径向渐变的半径长度为从圆心到离圆心最近的角 |
farthest-side |
指定径向渐变的半径长度为从圆心到离圆心最远的边 |
farthest-corner |
指定径向渐变的半径长度为从圆心到离圆心最远的角 |
开始颜色start-color,结束颜色stop-color
径向渐变可以接受一个“值列表”,用于同时定义多种颜色的径向渐变。
默认情况下,径向渐变的颜色节点是均匀分布的,不过我们可以为每一种颜色添加百分比,从而使得各个颜色节点不均匀分布。
语法
div{background:radial-gradient(red 5%,green 30%,blue 60%);}