目 录CONTENT

文章目录

通过构建一组彩色标记来学习 CSS 颜色

shibuyu
2022-11-16 / 0 评论 / 0 点赞 / 40 阅读 / 1,774 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

freeCodeCamp之CSS -2

免费学习编程的网站 freeCodeCamp(🔥) - 官方版(英文)

通过构建一组彩色标记来学习 CSS 颜色

使用色彩关键字

它表示一个具体的颜色值,且它不区分大小写。譬如这样 color:red 的 red 即是一个色彩关键字

哪些属性可以设置颜色

所有可以用到颜色值的地方,都可以用色彩关键字替代,那么在 CSS 中,什么地方可以用到颜色值呢?

  • 文本的颜色 color:red
  • 元素的背景色 background-color:red (包含各类渐变)
  • 元素的边框 border-color:red
  • 元素的盒阴影或文字阴影 box-shadow:0 0 0 1px red | text-shadow:5px 5px 5px red
  • 运用在一些滤镜当中 filter: drop-shadow(16px 16px 20px red)
  • <hr /> 水平线的颜色

使用RGB()

rgb() 表示颜色的红-绿-蓝(red-green-blue (RGB))模式
image-1668575563382
在 #RRGGBB 中,RR 表示 红色的深浅,GG 表示绿色的深浅,BB 表示蓝色的深浅。取值都是从 00 - FF,值越大表示该颜色越深。

如果采用 rgb(RR,GG,BB) 的写法,RR 取值 0~255 或者百分比,255 相当于 100%,和十六进制符号里的 F 或 FF 。

了解了 rgb() 的含义的话,记住常用的颜色值其实是很容易的,像上面说的 RR 表示红色的深浅,那么#FF0000 就表示为红色,同理可以得到 #00FF00 表示绿色, #0000FF表示蓝色。

使用HSL颜色模型

HSL 颜色模型或色调饱和度亮度是表示颜色的另一种方式。
CSS hsl 函数接受 3 个值:0 到 360 的数字表示色调,0 到 100 的百分比表示饱和度,0 到 100 的百分比表示亮度。
如果你想象一个色轮,色调红色是 0 度,绿色是 120 度,蓝色是 240 度。
饱和度指纯色的颜色强度从 0% 或灰色到 100%。
亮度是颜色出现的亮度,从 0% 或全黑到 100% 或全白,其中 50% 为中性。

颜色过渡或渐变色

渐变是一种颜色过渡到另一种颜色。 CSS linear-gradient 函数可让你控制沿线的过渡方向以及使用的颜色。

要记住的一件事是 linear-gradient 函数实际上创建了一个 image 元素,并且通常与可以接受图像作为一个值的 background 属性配对。

linear-gradient 函数非常灵活

语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明:
direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。

在不添加角度和方向的前提下,默认是从上到下
background: linear-gradient(color1, color2);

gradientDirection 是表明过渡的线的方向。 color1 和 color2 是颜色参数,它们是将在过渡本身中使用的颜色。 这些可以是任何类型的颜色,包括颜色关键字、十六进制、rgb 或 hsl。

linear-gradient 函数产生了平滑的红绿渐变。 虽然 linear-gradient 函数至少需要两个颜色参数才能工作,但它可以接受许多颜色参数。

参数color-stop

.red {
  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
}

规定渐变点的起始位置,以横坐标平分100%为算

gradientDirection 渐变方向举例

  1. background: linear-gradient(to left,#d3959b,#bfe6ba);
  • to left 设置渐变从右到左,相当于270deg。
  1. background: linear-gradient(to right,#d3959b,#bfe6ba);
  • to right设置渐变从左到右,相当于90deg。
  1. background: linear-gradient(to top,#d3959b,#bfe6ba);
  • to top 设置渐变从下到上,相当于0deg。
  1. background: linear-gradient(to bottom,#d3959b,#bfe6ba);
  • to bottom 设置渐变从上到下,相当于180deg。
  1. background: linear-gradient(to top right,#d3959b,#bfe6ba);
  • to right top = to top right :从左下角到右上角,对角线角度。
  1. background: linear-gradient(45deg,#d3959b,#bfe6ba);
  • 和 to top right 有细微差别(背景为正方形的时候无差别) 。
  1. background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);
  • 用百分比指定起始颜色的位置,默认值为0%。
  1. background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
  • 从左到右渐变,相当于90deg。

9. background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

  • 相当于 to top right,从左下角到右上角对角线渐变。

渐变兼容性

.header {
    /* Safari */
    background: -webkit-linear-gradient(red, blue);

    /* Opera */
    background: -o-linear-gradient(red, blue);

    /* Firefox */
    background: -moz-linear-gradient(red, blue);

    /* 标准的语法, 放在最后 */
    background: linear-gradient(red, blue);
}

透明度

透明度描述事物的不透明性或不透明性。 例如,一堵实心墙是不透明的,没有光线可以通过。 但是水杯要透明得多,你可以透过玻璃看到另一边。

使用 CSS opacity 属性,你可以控制元素的不透明或透明程度。 使用值 0 或 0%,元素将完全透明,而在 1.0 或 100% 时,元素将像默认情况下一样完全不透明。

另外一种不透明的方式 alpha 通道-rgba 函数

rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。

  • 红色(R)0 到 255 间的整数,代表颜色中的红色成分。。
  • 绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
  • 蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。
  • 透明度(A)取值 0~1 之间, 代表透明度。

添加阴影

box-shadow 属性允许你在元素周围应用一个或多个阴影。 这是基本语法:

box-shadow: offsetX offsetY blurRadius spreadRadius color;

如果不设置 blurRadius 的值,则默认为 0,并产生锐利的边缘。 blurRadius 的值越大,模糊效果就越大。
如果你想把阴影进一步扩大呢? 你可以使用可选的 spreadRadius 值来做到这一点。
与 blurRadius 一样,spreadRadius 的值如果没有设置,则默认为 0。

  • h-shadow 必需的。水平阴影的位置。允许负值
  • v-shadow 必需的。垂直阴影的位置。允许负值
  • blur 可选。模糊距离
  • spread 可选。阴影的大小
  • color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

最终版

0

评论区