css颜色

1.前景色

<style type="text/css">
			body {
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;}
			/* color name */
			h1 {
				color: DarkCyan;}
			/* hex code */
			h2 {
				color: #ee3e80;}						/* rgb value */
			p {
				color: rgb(100,100,90);}
		</style>

三种表示方式。颜色名，十六进制，rgb,rgb可以使用百分数。
2.背景色

<style type="text/css">
			body {
				background-color: rgb(200,200,200);
				color: white;
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;}
			h1 {
				background-color: DarkCyan;
				padding: inherit;}
			h2 {
				background-color: #ee3e80;
				padding: inherit;}
			p {
				background-color: white;
				color: rgb(100,100,90);
				padding: inherit;}
		</style>

同样三种表示方式。
3.透明度

div {
				width: 100px;
				height: 100px;
				margin: 40px;
				display: inline-block;
				background-color: #ee3e80;}
			p {
				width: 100px;
				height: 100px;
				position: relative;
				top: 20px;
				left: 20px;
				margin: 20px;}
			p.one {
				background-color: rgb(0,0,0);
				opacity: 0.5;}
			p.two {
				background-color: rgb(0,0,0);
				background-color: rgba(0,0,0,0.5);}

opcaity允许指定透明度。介于0.0至1.0之间，0是完全透明，1是不透明
rgba除了红绿蓝最后一个值是透明度。
hexa同理，除前六位外后2位是透明度

简写方式hex #aaffdd 可以简写为#afd
hesxa #aaffdd22 简写为#afd2
4.HSl和hsla

<style type="text/css">
			body {
				background-color: #C8C8C8;
				background-color: hsl(0, 0%, 78%);
				color: white;
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;}
			h1 {
				background-color: DarkCyan;
				padding: inherit;}
			h2 {
				background-color: #ee3e80;
				padding: inherit;}
			p {
				background-color: #ffffff;
				background-color: hsla(0,100%,100%,0.5);
				color: #64645A;
				padding: inherit;}
		</style>

hsl：参数为 色调，饱和度，明度
hsl色调 0-360 饱和度明度0~100%
饱和度可以理解为将纯色中掺入灰色，越低越灰
明度：0黑色，100白色
hsla加了一个透明度。

The transparent Keyword
The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element.

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

The currentcolor Keyword
The currentcolor keyword is like a variable that holds the current value of the color property of an element.

This keyword can be useful if you want a specific color to be consistent in an element or a page.

div {
  color: blue;
  border: 10px solid currentcolor;
}

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

CSS Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Using Angles
If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom".

Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);

Using Transparency
CSS gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

CSS Radial Gradients
A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.

Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Use of Different Size Keywords
The size parameter defines the size of the gradient. It can take four values:

closest-side
farthest-side
closest-corner
farthest-corner

https://www.w3schools.com/css/css3_gradients_radial.asp

CSS Conic Gradients
A conic gradient is a gradient with color transitions rotated around a center point.

To create a conic gradient you must define at least two colors.

Syntax
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
By default, angle is 0deg and position is center.

If no degree is specified, the colors will be spread equally around the center point.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>

<h1>Conic Gradient - Five Colors</h1>

<div id="grad1"></div>

</body>
</html>

Conic Gradient: Three Colors and Degrees
The following example shows a conic gradient with three colors and a degree for each color:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Create Pie Charts
Just add border-radius: 50% to make the conic gradient look like a pie:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}