CSS 颜色

最新推荐文章于 2024-05-09 08:43:19 发布

xiangxiongfly915

最新推荐文章于 2024-05-09 08:43:19 发布

阅读量852

点赞数

分类专栏： # CSS & Less & Sass 文章标签： css 前端颜色 RGB

本文链接：https://blog.csdn.net/qq_14876133/article/details/128495582

版权

CSS & Less & Sass 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

本文介绍了CSS3中颜色的关键字、十六进制和RGB表示法，重点讲解了opacity透明度的概念与使用，以及RGBA颜色模型，包括其语法和示例。此外，还详细阐述了线性渐变和径向渐变的用法，是前端开发者必备的CSS3色彩技巧指南。

摘要由CSDN通过智能技术生成

文章目录

CSS 颜色

CSS 颜色

关键字 & 十六进制 & RGB

W3C十六色

在这里插入图片描述

opacity 透明度

语法

opacity: 数值;

说明

在CSS3中，我们可以使用opacity属性来定义元素的透明度。

opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。

opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			a {
				display: inline-block;
				padding: 5px 10px;
				font-family: 微软雅黑;
				color: white;
				background-color: hotpink;
				cursor: pointer;
			}

			a:hover {
				opacity: 0.6;
			}
		</style>
	</head>
	<body>
		<a>hello world</a>
	</body>
</html>

RGBA 颜色

语法

rgba(R,G,B,A)

说明

RGBA就是在RGB基础上增加了一个透明度通道Alpha。

R，指的是红色值（Red）；G，指的是绿色值（Green）；B，指的是蓝色值（Blue）；A，指的是透明度（Alpha）。

R、G、B这三个参数可以为整数，取值范围为0_{255，也可以为百分比，取值范围为0%}100%。参数A为透明度，跟opacity属性是一样的，取值范围为0.0~1.0。

写法

rgba(255, 255, 0, 0.5)
rgba(50%, 80%, 50%, 0.5)

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				display: inline-block;
				list-style-type: none;
				width: 200px;
			}

			li {
				height: 30px;
				line-height: 30px;
				font-size: 20px;
				font-weight: bold;
				text-align: center;
			}

			/*第1个li，透明度为1.0*/
			li:first-child {
				background-color: rgba(255, 0, 255, 1.0);
			}

			/*第2个li，透明度为0.6*/
			li:nth-child(2) {
				background-color: rgba(255, 0, 255, 0.6);
			}

			/*第3个li，透明度为0.3*/
			li:last-child {
				background-color: rgba(255, 0, 255, 0.3);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>hello world</li>
			<li>hello world</li>
			<li>hello world</li>
		</ul>
	</body>
</html>

在这里插入图片描述

CSS3 渐变

线性渐变

语法

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

方向取值

在这里插入图片描述

说明

线性渐变使用的是background属性，而不是background-color属性。如果使用background-color属性，则无效。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				border: 1px solid #DADADA;
				border-radius: 5px;
				font-family: "微软雅黑";
				cursor: pointer;
			}

			#box1 {
				background: linear-gradient(to bottom, #F8F8F8, #DCDCDC);
			}

			#box2 {
				background: linear-gradient(to bottom, #FFC559, #FFAF19);
			}
		</style>
	</head>
	<body>
		<div id="box1">渐变按钮1</div><br>
		<div id="box2">渐变按钮2</div>
	</body>
</html>

在这里插入图片描述

径向渐变

语法

background: radial-gradient(position, shape size, 开始颜色, 结束颜色)

说明

position和shape size都是可选参数。如果省略，则表示采用默认值。start-color和stop-color都是必选参数，可以有多个颜色值。

Chrome和Firefox只能识别以-webkit-作为前缀的径向渐变属性。

position取值

在这里插入图片描述

shape取值

在这里插入图片描述

size取值

在这里插入图片描述

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				width: 160px;
				height: 160px;
				color: white;
				background: -webkit-radial-gradient(yellow, orangered);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>