构建一组彩色笔 CSS颜色
文章目录
-
-
- 1、补色
- 2、元素颜色
-
- 十六进制(hex 值)
- HSL颜色模型
- 3、 渐变色(linear-gradient 函数)
-
- 颜色中间点（color-stop）
- 4、 透明度
-
- opacity 属性
- alpha 属性
- 5、 rgba 函数
- 6、 border属性(设置边框)
-
- 实线边框
- 边框颜色
- 简写
- 7、 阴影(box-shadow 属性)
- 完整代码
-
- index.html
- styles.css
- 效果图
-
1、补色
色轮上相互对立的两种颜色称为补色，如果将两种互补色组合在一起，它们会产生灰色。 但当它们并排放置时，这些颜色会产生强烈的视觉对比，显得更亮
2、元素颜色
十六进制(hex 值)
十六进制颜色值以 # 字符开头，从 0-9 和 A-F 取六个字符。 第一对字符代表红色，第二对代表绿色，第三对代表蓝色。 例如，#4B5320
十六进制或以 16 为底的值，从 0 到 9，然后是 A - F：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
对于十六进制颜色，00 是该颜色的 0%，FF 是 100%。 所以 #00FF00 转换为 0% 红色、100% 绿色和 0% 蓝色，与 rgb(0, 255, 0) 相同
/*以下三种表示的均为深绿色*/
background-color: green;
background-color: rgb(0,127,0);
background-color: #007F00;
HSL颜色模型
CSS hsl 函数接受 3 个值：0 到 360 的数字表示色调，0 到 100 的百分比表示饱和度，0 到 100 的百分比表示亮度
想象一个色轮，色调红色是 0 度，绿色是 120 度，蓝色是 240 度
饱和度指纯色的颜色强度从 0% 或灰色到 100%。 你必须给饱和度和亮度值添加百分比标志 %。
亮度是颜色出现的亮度，从 0% 或全黑到 100% 或全白，其中 50% 为中性
3、 渐变色(linear-gradient 函数)
渐变是一种颜色过渡到另一种颜色，CSS linear-gradient 函数可以控制沿线的过渡方向以及使用的颜色，linear-gradient 函数实际上创建了一个 image 元素，并且通常与可以接受图像作为一个值的 background 属性配对
linear-gradient(gradientDirection, color1, color2, ...);
gradientDirection 是表明过渡的线的方向：90deg为垂直方向，180deg为水平方向，如果没有为 linear-gradient 函数提供 gradientDirection 参数，则默认情况下，它会从上到下或沿 180 度线排列颜色
color1 和 color2 是颜色参数，它们是将在过渡本身中使用的颜色。 这些可以是任何类型的颜色，包括颜色关键字、十六进制、rgb 或 hsl
例如：将沿 90 度线将红到绿渐变应用到第一支笔。首先，在 .red CSS 规则中，将 background 属性设置为 linear-gradient()，并将它的值设置为 90deg，作为 gradientDirection
.red {
background: linear-gradient(90deg);
}
linear-gradient 函数需要至少两个颜色参数才能工作，并可以接受许多颜色参数
.red {
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
}
颜色中间点（color-stop）
颜色中间点（color-stop）允许你微调颜色沿渐变线的位置。 它们是像 px 这样的长度单位，或者是在 linear-gradient 函数中定位颜色的百分比。
例如，在这个红-黑渐变中，从红色到黑色的过渡发生在渐变线的 90% 处，因此红色占据了大部分可用空间：
linear-gradient(90deg, red 90%, black);
4、 透明度
opacity 属性
透明度描述事物的不透明性或不透明性
使用 CSS opacity 属性，可以控制元素的不透明或透明程度。 使用值 0 或 0%，元素将完全透明，而在 1.0 或 100% 时，元素将像默认情况下一样完全不透明
.sleeve {
width: 110px;
height: 25px;
background-color: white;
opacity:0.5;
}
alpha 属性
另一种设置元素不透明度的方法是使用 alpha 通道。 与 opacity 属性类似，alpha 通道控制颜色的透明或不透明程度
5、 rgba 函数
要将 alpha 通道添加到 rgb 颜色，请改用 rgba 函数
rgba 函数的工作方式与 rgb 函数类似，但在 0 到 1.0 之间多取一个数字作为 alpha 通道：
/*rgba(redValue, greenValue, blueValue, alphaValue);*/
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255,255,255,0.5);
}
也可以使用带有 hsl 和 hex 颜色的 alpha 通道
6、 border属性(设置边框)
实线边框
单实线
border-left-style:solid;
双实线
border-left-style:double;
边框颜色
border-left-color:black;
简写
border-left 简写属性允许你同时设置左边框的宽度、样式和颜色
border-left: width style color;
7、 阴影(box-shadow 属性)
box-shadow 属性允许你在元素周围应用一个或多个阴影：
box-shadow: offsetX offsetY blurRadius spreadRadius color;
offsetX 和 offsetY 值的作用：
offsetX 和 offsetY 都接受数字值，单位是 px 和其他 CSS 单位
正 offsetX 值将阴影向右移动，负值将它向左移动
正 offsetY 值将阴影向下移动，负值将它向上移动
如果你想要 offsetX 和 offsetY 其中一个值为零，或两个都为零（0），那么你不需要添加单位， 每种浏览器都知道零意味着没有变化
阴影的高度和宽度由应用阴影的元素的高度和宽度决定，也可以使用可选的 spreadRadius 值来扩大阴影的范围
如果不设置 blurRadius 的值，则默认为 0，并产生锐利的边缘。 blurRadius 的值越大，模糊效果就越大
.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
box-shadow: 5px 5px 5px green;
}
spreadRadius 值可以扩大阴影范围(四周)，与 blurRadius 一样，spreadRadius 的值如果没有设置，则默认为 0
.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
box-shadow: 0 0 20px 0 red;
}
完整代码
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colored Markerstitle>
<link rel="stylesheet" href="styles.css">
head>
<body>
<h1>CSS Color Markersh1>
<div class="container">
<div class="marker red">
<div class="cap">div>
<div class="sleeve">div>
div>
<div class="marker green">
<div class="cap">div>
<div class="sleeve">div>
div>
<div class="marker blue">
<div class="cap">div>
<div class="sleeve">div>
div>
div>
body>
html>
styles.css
h1 {
text-align: center;
}
.container {
background-color: rgb(255, 255, 255);
padding: 10px 0;
}
.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}
.cap {
width: 60px;
height: 25px;
}
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left: 10px double rgba(0, 0, 0, 0.75);
}
.cap, .sleeve {
display: inline-block;
}
.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}
.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
box-shadow: 0 0 20px 0 #3B7E20CC;
}
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
box-shadow: 0 0 20px 0 hsla(223,59%,31%,0.8);
}
效果图
