web前端学习

概述

在CSS样式中有多种颜色表达方式。

1.纯色

定义方法	使用详解
颜色关键字	颜色英文名称，共有140种，如：black、red、green
十六进制颜色	从开始到结尾，每两位十六进制依次代表红色、绿色、蓝色，最终显示的颜色是这3种颜色的混合色
RGB函数	rgb(red,green,blue)其中的red、green、blue的值是整数0～255，分别表示红色、绿色、蓝色的强度
RGBA函数	多一个透明参数,alpha=0完全透明，alpha=1完全不透明，可用小数或百分比
HSL颜色	HSL颜色是用色相hue（0-360）、饱和度saturation（0-100%）和明度lightness（0-100%）表示颜色
HSLA颜色	多一个透明参数,alpha=0完全透明，alpha=1完全不透明，可用小数或百分比
opacity属性	用来定义颜色的透明度。其取值在0到1之间，0表示完全透明，1表示完全不透明。

注意：rgba()、hsla()和opacity都能实现透明效果。它们最大的不同是opacity除作用于元素外，还同时作用于元素内的所有内容；而rgba()和hsla()只作用于元素本身，即背景色或文本颜色的透明度。

	
background-color: red;
background-color: #55aaff;
background-color: rgb(20, 50, 70);
background-color: rgba(50, 50, 50, 0.5);
background-color: hsl(10, 30%, 40%);	
background-color: hsla(10, 30%, 70%, 70%);

2.线性渐变

语法格式如下： background: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);

	
/* 1.从左到右渐变 */
background: linear-gradient(to right,red,blue);
/* 2.从上到下渐变 */
background: linear-gradient(to bottom,red,blue);
/* 3.45度角渐变 */
background: linear-gradient(45deg,red,blue);
/* 4.自定义多色渐变 */
background: linear-gradient(#ff0000 0%, #ffff00 50%, #0000ff 100%);
/* 5.渐变转透明 */
background: linear-gradient(to left,rgba(255,0,0,0.1),rgba(255,255,0,1));

2.径向渐变

语法格式如下： background-image: radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, … );

	
/* 1.圆形渐变 */
background: radial-gradient(circle, red, blue);
/* 2.椭圆渐变 */
background: radial-gradient(ellipse, red, blue);
/* 3.圆形多色渐变 */
background: radial-gradient(circle, #ff0000 0%, #ffff00 50%, #0000ff 100%);
/* 4.重复径向渐变 */
background: repeating-radial-gradient(red, yellow 20%, green 40%);
/* 5.渐变转透明 */
background: radial-gradient(circle, green, rgba(255,0,0,0.2));

3.边框渐变

语法格式如下： border-image: linear-gradient(方向，颜色1，颜色2 …) 内向偏移量; border-image: radial-gradient(颜色1 百分比，颜色2 百分比…) 内向偏移量

	
#color_bk20{
	border: 6px solid;
	/* 最后面跟的 5 表示内向偏移量，写成和边框设置的宽度一样即可 */
	border-image: linear-gradient(to bottom right,yellow, green) 5;
}
#color_bk21{
	/* 边框的颜色为什么不重要，会被下面覆盖的 */
	border: 6px solid black;
	/* 最后面跟的 5 表示内向偏移量，写成和边框设置的宽度一样即可  */
	border-image: radial-gradient(yellow 70%, green 130%) 5;
}
#color_bk22{
	/*首先我们设置边框只显示底部，宽度为5px的实线。*/
	border-bottom: 5px solid;
	/*设置线性渐变*/
	border-image: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%) 5 5 5 5;
}
#color_bk23{
	/*首先我们设置边框只显示右侧，宽度为5px的实线。*/
	border-right: 5px solid;
	/*设置线性渐变*/
	border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 5 5 5 5;
}

4.扩展（CSS线性渐变颜色网站）

一个集合180种免费的线性渐变网站，可在任何网站使用您不仅可以复制渐变的原生CSS颜色代码，还可以查看下载每个优质的渐变图片。

免费线性渐变网站