【CSS颜色】

本文章属于学习笔记,在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习

三、CSS颜色

1、有两种主要的颜色模型:电子设备中使用的加性RGB(红、绿、蓝)模型和印刷品中使用的减色CMYK(青色、品红、黄色、黑色)模型。
使用RGB模型。这意味着颜色从黑色开始,随着不同层次的红、绿、蓝的引入而变化。一个简单的方法就是使用CSS rgb函数。

黑色rgb(0, 0, 0)
红色rgb(255,0,0)
绿色rgb(0,255,0)
蓝色0,0,255
白色255,255,255
黄色255,255,0
蓝绿色cyan 0,255,255
紫色255,0,255
橙色255,127,0

2、一个非常常见的方式来应用颜色的CSS元素是十六进制或十六进制值。虽然十六进制值听起来很复杂,但它们实际上只是RGB值的另一种形式。
十六进制颜色值以#字符开头,从0-9和a - f中选取6个字符。第一对字符代表红色,第二对代表绿色,第三对代表蓝色。例如,# 4 b5320
十六进制,或以16为基数的值,从0-9开始,然后是A-F: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)是一样的

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

蓝色:hsl(240,100%,50%)

4、可以在元素上使用颜色过渡或渐变
渐变是指一种颜色过渡到另一种颜色。CSS线性渐变函数允许您控制沿直线过渡的方向,以及使用哪些颜色。
线性梯度函数实际上创建了一个图像元素,并且通常与可以接受图像作为值的背景属性配对。
线性梯度函数非常灵活——以下是你在本教程中使用的基本语法:

linear-gradient(gradientDinection, color1, color2,…)

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

5、颜色停止允许你微调颜色沿着渐变线的位置。它们是像px或百分比这样的长度单位,在线性梯度函数中跟随颜色。
例如,在这个红黑梯度中,从红色到黑色的过渡发生在梯度线上的90%点,所以红色占据了大部分可用空间:linear-gradient(90deg,red90%,black);
不透明度描述了某物的不透明或不透明程度。例如,固体墙是不透明的,没有光线可以通过。但饮水杯的透明度要高得多,你可以透过玻璃看到另一边。
使用CSS不透明度属性,您可以控制元素的不透明或透明程度。当值为0或0%时,元素将完全透明,当值为1.0或100%时,元素将完全不透明,就像默认情况一样。
opacity:0.5;透明度

6、另一种设置元素不透明度的方法是使用alpha通道。与不透明度属性类似,alpha通道控制颜色的透明或不透明程度。
你已经用命名颜色和不透明度属性设置了袖的不透明度,但是你可以在其他CSS颜色属性中添加alpha通道。

7、为rgb颜色添加alpha通道,请使用rgba函数代替:
rgba函数的工作原理和rgb函数一样,但是对于alpha通道要多取一个从到1.0的数字:rgba(redValue, greenValue, blueValue, alphaValue);
您还可以使用hsl和十六进制颜色的alpha通道。

8、边框有几种样式可供选择。你可以让你的边界是实线,但你也可以使用虚线或虚线,如果你喜欢。实线边框可能是最常见的。border-left-style:solid[double];
边框现在应该是可见的。如果没有设置颜色,则默认使用黑色。为了让你的代码更易读,最好明确设置边框颜色。

9、border-left速记属性可以让你同时设置左边框的宽度、样式和颜色。
语法:border-left: width style color;

10、box-shadow属性允许你在一个元素周围应用一个或多个阴影。下面是基本语法:
box-shadow: offsetX offsetY;
下面是offsetX和offsetY值的工作原理:
1、offsetx和offsetY都接受px和其他CSS单位的数值
2、一个正的off setX值将阴影向右移动,一个负值将阴影向左移动
3、正offsetY值使阴影向下移动,负值使阴影向上移动
4、如果你想让offset和offset的值为0,你不需要添加一个单位。每个浏览器都明白,零表示没有变化
阴影的高度和宽度由它所应用的元素的高度和宽度决定。你也可以使用一个可选的spreadRadius值来扩展阴影的范围。

11、注意阴影的边缘是锐利的。这是因为box-shadow属性有一个可选的blurRadius值:box-shadow: offsetx offisety blumradius color;
如果不包含blurRadius值,则默认值为e,并产生尖锐的边缘。blurRad tus值越高,模糊效果越好。
想进一步扩大阴影可以使用可选的spreadRadius值:box-shadow: offsetX offsetY blurRadius spreadRadius color;
与blurRadius一样,如果不包含spreadRadius,则默认为0

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 blue;
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css"></head><body><h1>CSS Color Markers</h1><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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

并发编程2-掌握C#线程库的使用

C#线程库是用于在C#中进行多线程编程的一组类和方法。通过使用线程库&#xff0c;您可以创建和管理多个线程&#xff0c;实现并发执行和异步操作。以下是一些常用的C#线程库的使用介绍&#xff1a; 创建线程&#xff1a;您可以使用Thread类来创建新的线程。通过实例化Thread类…

【iOS ARKit】RealityKit 中的物理组件

在 RealityKit 中&#xff0c;对虚拟物体进行物理模拟时需要在该物体实体对象上挂载物理组件&#xff0c;物理引擎会忽略所有未挂载物理组件的物体&#xff0c;RealityKit 包含两个跟物理相关的组件&#xff1a;PhysicsBodyComponent 和PhysicsMotionComponent,ModelEntity 实体…

学习JAVA的第二十一天(基础)

多线程 线程&#xff1a; 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。 进程&#xff1a; 程序的基本执行实体 并发&#xff1a; 在同一时刻&#xff0c;有多个指令在单个CPU上交替执行 并行&#xff1a; 在同一时刻&…

HTML本地离线缓存?

在 HTML5 中&#xff0c;提供了一种本地离线存储的机制&#xff0c;即应用程序缓存&#xff08;Application Cache&#xff09;。通过应用程序缓存&#xff0c;可以使 Web 应用程序在离线状态下继续访问&#xff0c;并提高应用程序的加载速度和性能。以下是应用程序缓存的基本工…

【C语言】Windows下的C语言线程编程详解

文章目录 1. 头文件1.1 windows.h1.2 process.h 2. 创建线程3. 线程同步3.1 线程同步方式3.1 互斥量&#xff08;Mutex&#xff09;3.2 事件&#xff08;Event&#xff09; 4. 线程的结束与资源管理5.线程池&#xff08;简要&#xff09; 在Windows平台下&#xff0c;C语言提供…

活动会议线上直播,如何扩大曝光?媒体直播分流解析

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 线上直播扩大曝光与媒体直播分流解析 一、扩大曝光策略&#xff1a; 平台选择&#xff1a;选择用户基数大、活跃度高的直播平台进行直播。 预告宣传&#xff1a;提前发布直播预告&…

k8s-Istio服务网络 27

官网&#xff1a;https://istio.io/latest/zh/about/service-mesh/ Istio与k8s的区别 SpringCloud传统微服务结合k8s与Istio与k8s结合&#xff1a; Istio数据面&#xff1a;通过envoy以sidecar方式拦截svc的流量来进行治理。 Istio控制面&#xff1a;pilot list/watch APIserv…

Flask学习(二):flask模板渲染

Flask没有自己模板引擎&#xff0c;使用的是 jinja2 模板引擎&#xff0c;可以帮助我们将数据渲染到各种格式的文档中&#xff0c;如 HTML、XML、Markdown 等。 中文文档地址&#xff1a;Jinja2中文文档_w3cschool 程序示例&#xff1a; from flask import Flask, render_te…

HarmonyOS NEXT应用开发之异常处理案例

介绍 本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法&#xff0c;主要分为应用崩溃、应用卡死以及系统查杀三种。 效果图预览 使用说明&#xff1a; 点击构建应用崩溃事件&#xff0c;3s之后应用退出&#xff0c;然后打开应用进入应用异常页面&#x…

nginx启动闪退

在nginx目录下cmd&#xff0c;nginx -t&#xff0c;找到原因是&#xff1a;“在端口80上运行NGINX时&#xff0c;因为端口80是HTTP默认端口&#xff0c;需要管理员权限才能访问” 所以修改端口号&#xff1a; 在nginx.conf文件中&#xff0c;修改listen&#xff1a;80为8080 …

【C++】类的默认成员函数(下)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、运算符重载1.1 引例1.2 概念及运用&#xff1a;1.3 牛刀小试:1.4 重载1.5 运…

QT TCP通信介绍

QT是一个跨平台的C应用程序开发框架&#xff0c;它提供了一套完整的工具和库&#xff0c;用于开发各种类型的应用程序&#xff0c;包括图形用户界面(GUI)应用程序、命令行工具、网络应用程序等。QT提供了丰富的功能和类来简化网络通信的开发&#xff0c;其中包括TCP通信。 TCP…

C++面试100问!(二)

怎么定义常量的&#xff1f;常量存放在内存的哪个位置&#xff1f; 常量在C里的定义就是一个const加上对象类型&#xff0c;常量定义必须初始化。对于局部对象&#xff0c;常量存放在栈区&#xff0c;对于全局对象&#xff0c;常量存放在全局/静态存储区。对于字面值常量&#…

Linux-轻量级数据库sqlite函数接口-016

1 1.1【sqlite3_open】 1.1.1函数原型 【int sqlite3_open(const char *filename, /* Database filename (UTF-8) */sqlite3 **ppDb /* OUT: SQLite db handle */);】1.1.2函数功能 打开数据库文件(创建一个数据库连接)1.1.3函数参数 【filename】&#xff1a;…

Element Plus与Ant Design Vue:选型对比

在Vue.js的开发过程中&#xff0c;选择合适的UI框架对于项目的成功至关重要。Element Plus和Ant Design Vue作为两个热门的Vue UI框架&#xff0c;各自拥有独特的特点和优势。本文将从多个维度对这两个框架进行对比&#xff0c;帮助开发者在选择时做出明智的决策。 一、框架版…

Python网络基础爬虫-python基本语法

文章目录 逻辑语句if,else,elifforwhile异常处理 函数与类defpassclass 逻辑语句 熟悉C/C语言的人们可能很希望Python提供switch语句&#xff0c;但Python中并没有这个关键词&#xff0c;也没有这个语句结构。但是可以通过if-elif-elif-…这样的结构代替&#xff0c;或者使用字…

目标检测——YOLOv2算法解读

论文&#xff1a;YOLO9000: Better, Faster, Stronger 作者&#xff1a;Joseph Redmon, Ali Farhadi 链接&#xff1a;https://arxiv.org/pdf/1612.08242v1.pdf 代码&#xff1a;http://pjreddie.com/yolo9000/ YOLO系列其他文章&#xff1a; YOLOv1通俗易懂版解读SSD算法解读…

STM32/GD32——CAN协议

说明&#xff1a;本文不断更新中&#xff0c;内容均为作者手打... 芯片选型 Ciga Device — GD32F470系列 CAN协议规则 CAN帧种类介绍 CAN总线以“帧”的方式进行通讯。CAN协议定义了5种类型的帧&#xff1a;数据帧、遥控帧、错误帧、过载帧、间隔帧。其中“数据帧”最为常…

记一次生产慢sql索引优化及思考

记一次生产慢sql索引优化及思考 问题重现 夜黑风高的某一晚&#xff0c;突然收到一条运营后台数据库慢sql的报警&#xff0c;耗时竟然达到了60s。看了一下&#xff0c;还好不是很频繁&#xff0c;内心会更加从容排查问题&#xff0c;应该是特定条件下没有走到索引导致&#x…

如何在数据库中存储小数:FLOAT、DECIMAL还是BIGINT?

前言 这里还是用前面的例子: 在线机票订票系统的数据表设计。此时已经完成了大部分字段的设计&#xff0c;可能如下: CREATE TABLE flights ( flight_id INT AUTO_INCREMENT PRIMARY KEY, flight_number VARCHAR(10), departure_airport_code VARCHAR(3), arrival_ai…