关于CSS渲染:CSS是如何绘制颜色的

颜色的原理

最常见的颜色相关的属性就是 color 和 background-color。

颜色值：RGB 颜色，CMYK 颜色，HSL 颜色，其它颜色

RGB 颜色：它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。

现代计算机中多用 0 - 255 的数字表示每一种颜色，这正好占据了一个字节，每一个颜色就占据三个字节。

CMYK 颜色：在印刷行业，使用的就是这样的三原色（品红、黄、青）来调配油墨，这种颜色的表示法叫做 CMYK，它用一个四元组来表示颜色。

HSL 颜色：HSL 这样的颜色模型被设计出来了，它用一个值来表示人类认知中的颜色，我们用专业的术语叫做色相（H）。加上颜色的纯度（S）和明度（L），就构成了一种颜色的表示。

其它颜色：RGBA 是代表 Red（红色）、Green（绿色）、Blue（蓝色）和 Alpha 的色彩空间。RGBA 颜色被用来表示带透明度的颜色，实际上，Alpha 通道类似一种颜色值的保留字。在 CSS 中，Alpha 通道被用于透明度，所以我们的颜色表示被称作 RGBA，而不是 RGBO（Opacity）

CSS 还规定了名称型的颜色，它内置了大量（140 种）的颜色名称。

渐变：在 CSS 中，background-image这样的属性，可以设为渐变。CSS 中支持两种渐变，一种是线性渐变，一种是放射性渐变。

线性渐变的写法是：

linear-gradient(direction, color-stop1, color-stop2, ...);

direction 可以是方向

  • to bottom
  • to top
  • to left
  • to right
  • to bottom left
  • to bottom right
  • to top left
  • to top right
  • 120deg
  • 3.14rad

color-stop 是一个颜色和一个区段

  • rgba(255,0,0,0)
  • orange
  • yellow 10%
  • green 20%
  • lime 28px

放射性渐变需要一个中心点和若干个颜色：

radial-gradient(shape size at position, start-color, ..., last-color);

形状：

CSS 中的很多属性还会产生形状，比如我们常见的属性：

  • border
  • box-shadow
  • border-radius

这些产生形状的属性非常有趣，我们也能看到很多利用它们来产生的 CSS 黑魔法。然而，这里我有一个相反的建议，我们仅仅把它们用于基本的用途，把 border 用于边框、把阴影用于阴影，把圆角用于圆角，所有其它的场景，都有一个更好的替代品：datauri+svg

到此这篇关于关于CSS渲染:CSS是如何绘制颜色的的文章就介绍到这了,更多相关:CSS如何绘制颜色内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

    目录 实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背

  • 使用html+css+js实现导航栏滚动渐变效果

    目录 实现: 1.定义导航栏的文字标签: 2.导航栏整体的样式: 3.北极光这个logo的样式: 4.给北极光logo定位一个图片在文字左边: 5.右边导航标签的一些样式,样式等都不做详细说明了,毕竟每个人的都不一样~: 6.当页面有滚动后导航栏的样式,padding上下变小,字体颜色变,有了蓝背景色: 7.简单js,实现部分: 第一种: 第二种:直接这样: 完整代码: 先看效果: 实现: 1.定义导航栏的文字标签: <div class="tou"> <sapn c

  • 使用canvas制作炫酷黑客帝国数字雨背景html+css+js

    目录 制作: 1.定义canvas标签: 2.开始js部分,先定义变量: 3.初始化字符串数组,先给每条字符串位置,字符先不给: 4.绘制每条字符串: 5.更新字符串: 6.设置动画过程: 7.在窗口大小改变时,设置canvas画布能实时铺满屏幕: 完整代码: 制作: 1.定义canvas标签: <canvas id="canvas"></canvas> 2.开始js部分,先定义变量: /* 获取画布 */ var canvas = document.query

  • html+css+js实现简易版ChatGPT聊天机器人

    OpenAI的一款聊天机器人模型ChatGPT爆火,本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

  • Vue使用Less与Scss实现主题切换方法详细讲解

    目录 一.Less/Scss变量换肤 二.element-UI组件的换肤 一.Less/Scss变量换肤 具体实现: 1.初始化vue项目 2.安装插件: npm install style-resources-loader -D npm install vue-cli-plugin-style-resources-loader -D 当然也要安装less.less-loader等插件,具体的安装配置,请自行google 3.新建theme.less文件用于全局样式配置.在src目录下新建the

  • 使用html+css实现页面书本翻页特效

    目录 效果: 实现: 1.定义标签,shu是书本,feng是封面,wen是文字内容. 2.定义书本的基本属性,宽高,阴影等,伪类是下面和右面那两条阴影. 3.鼠标经过,阴影变化,然后书本向左旋转: 4.封面的基本样式: 5.封面旋转: 完整代码: 效果: 实现: 1.定义标签,shu是书本,feng是封面,wen是文字内容. <div class="shu"> <div class="feng"></div> <div cl

  • 关于CSS渲染:CSS是如何绘制颜色的

    颜色的原理 最常见的颜色相关的属性就是 color 和 background-color. 颜色值:RGB 颜色,CMYK 颜色,HSL 颜色,其它颜色 RGB 颜色:它符合光谱三原色理论:红.绿.蓝三种颜色的光可以构成所有的颜色. 现代计算机中多用 0 - 255 的数字表示每一种颜色,这正好占据了一个字节,每一个颜色就占据三个字节. CMYK 颜色:在印刷行业,使用的就是这样的三原色(品红.黄.青)来调配油墨,这种颜色的表示法叫做 CMYK,它用一个四元组来表示颜色. HSL 颜色:HSL

  • js+css绘制颜色动态变化的圈中圈效果

    js+css绘制颜色动态变化的圈中圈效果

    本文实例讲述了js+css绘制颜色动态变化的圈中圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>circle</title> <style type="text/css" > .circle { border-radius:50%; background:#DDDDDD; } .circle_inside { width:80%; height:80%;

  • Vue中的作用域CSS和CSS模块的区别

    现代Web开发中的CSS离完美还差得远,这并不奇怪.现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突: 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 . 为了减轻CSS存在的主要痛点,我们在项目中普遍采用 BEM 的方法来.不过这只能解决CSS问题中的一小部分. 对我们来说是幸运的,社区已经开发出了可以帮助我们更彻底地解决问题的解决方案.你可能已经听说过 CSS Modules. Styled Componetns. Glamorous或 JSS.这

  • Vue中对比scoped css和css module的区别

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成

  • Lesson03_01 什么是CSS和CSS的设置方式

    第3讲 CSS 何为CSS CSS的几种设置方式 样式规则选择器 样式规则的注释与有效范围 样式属性详解 什么是CSS和CSS的设置方式 作者:Loncer 更多学习资源尽在:wwww.loncer.cn 什么是CSS    CSS即:Cascading Style Sheets这几个英文单词的缩写,中文为:层叠样式表.它除了可以轻松设置网页元素的显示位置和格式外,还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.简而言之.CSS就是要对网页的显示效果实现与Word一样的排版控制.例如下的代码:<

  • css教程 css和document

    css教程 css和document

    Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user int

  • javascript实现通过表格绘制颜色填充矩形的方法

    本文实例讲述了javascript实现通过表格绘制颜色填充矩形的方法.分享给大家供大家参考.具体如下: <html> <head> <title> Javascript画矩形 </title> <script type="text/javascript"> //定义函数,传入设置参数,返回一个有背景颜色的表格 function drawFilledRect(x,y,w,h,color) { document.write(&qu

  • Lesson03_01    什么是CSS和CSS的设置方式

    第3讲 CSS 何为CSS CSS的几种设置方式 样式规则选择器 样式规则的注释与有效范围 样式属性详解 什么是CSS和CSS的设置方式 作者:Loncer 更多学习资源尽在:wwww.loncer.cn 什么是CSS    CSS即:Cascading Style Sheets这几个英文单词的缩写,中文为:层叠样式表.它除了可以轻松设置网页元素的显示位置和格式外,还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.简而言之.CSS就是要对网页的显示效果实现与Word一样的排版控制.例如下的代码:<

  • 10条影响CSS渲染速度的写法与使用建议第1/3页

    这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条. 1.*{} #jb51 *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果.所以就有了*通配符.*会遍历所有的标签: *{margin:0; padding:0} 如果这样写,页面中所有的标签的margin全是0:padding也是0: #jb

  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置

    早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm,写了一大堆的代码,靠,现在派不上用场,小鸽子写了一个更好的样式生成器,适合DIV+CSS架构的网页.(在网吧做网页的朋友,可以使用这个呀!)将常用的样式写了出来,做成DW的扩展插件多好,麻烦高手把他做成DW的扩展插件:小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子] ▒ 恋婷DIV+CSS编辑器 beta1.0 var sIni

随机推荐