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))模式
在 #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 渐变方向举例
background: linear-gradient(to left,#d3959b,#bfe6ba);
- to left 设置渐变从右到左,相当于270deg。
background: linear-gradient(to right,#d3959b,#bfe6ba);
- to right设置渐变从左到右,相当于90deg。
background: linear-gradient(to top,#d3959b,#bfe6ba);
- to top 设置渐变从下到上,相当于0deg。
background: linear-gradient(to bottom,#d3959b,#bfe6ba);
- to bottom 设置渐变从上到下,相当于180deg。
background: linear-gradient(to top right,#d3959b,#bfe6ba);
- to right top = to top right :从左下角到右上角,对角线角度。
background: linear-gradient(45deg,#d3959b,#bfe6ba);
- 和 to top right 有细微差别(背景为正方形的时候无差别) 。
background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);
- 用百分比指定起始颜色的位置,默认值为0%。
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颜色值寻找颜色值的完整列表
最终版
评论