关键字颜色　　　　　　　　　　red

十六进制颜色　　　　　　　　　#FF0000

RGB颜色　　　　　　　　　　  rgb（255，0,0）

新增的颜色表示方法

RGBa：

　　RGB代表光的三原色，Red、Green和Blue

　　CSS3中可以增加一个值a（alpha），表示颜色的透明度

　　Background-color：rgba（0,0,0,0.35）；

　　　　　　　　　　　　　　　　取值范围0-1之间，0代表完全透明，1代表完全不透明

HSL：

　　H（hue），表示色相

　　　　用一个色环表示不同的颜色

　　　　取值范围是0-360

　　　　0和360是红色

　　　　30是橙色

　　　　180表示绿色

　　　　240表示蓝色等等

　S（staturation），表示饱和度

　　　　表示色彩的鲜艳成都

　　　　取值范围从0%-100%

　　　　饱和度越高，颜色越鲜艳

　　　　完全不饱和的颜色没有色相

L（lightness），表示亮度

　　　　控制色彩明暗变化

　　　　取值范围0%-100%

　　　　数值越小，色彩越暗，越接近于黑色

　　　　数值越大，色彩越亮，越接近于白色

实例：

　　Background-color：hsl（30,100%，50%）；

HSLa和RGBa是一样的

　　

CSS3 颜色属性的更多相关文章

  1. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  2. CSS3颜色特征温故

    网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...

  3. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  4. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  5. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  6. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

  7. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  8. CSS3 高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  9. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

随机推荐

  1. 基于VMware Workstation搭建开发服务器

    基于VMware Workstation搭建开发服务器   文章为本人原创,转载请联系作者并注明出处.晓松 源URL: https://www.jianshu.com/p/e62ab7de0124 我 ...

  2. VC++开发Windows系统全局钩子

    本文的大部分内容属于对一篇网文的实践与练习,同时参考的还有一本书,在此向网文与书的作者表示敬意. 这个程序是一个windows系统键盘监控程序,随着开机自动启动,可以监控系统中各用户的键盘,并将按键记 ...

  3. Comparable接口——容器中自定义类排序

    1.容器TreeMap,默认根据Key对象中某个属性的从小到大排列元素. (1)如下代码示例,Key是整型数字,所以按照其从小到大的顺序排列 public class TestTreeMap { pu ...

  4. jzoj3363

    JYY 来到了一个新的城市,为了和大家保持联系,第一件事就是办理新的手机号.JYY 对号码的要求很高,希望大家都能够顺畅地阅读手机号,因此 JYY 特别研究了地球人的电话号码阅读习惯,有如下重大发现 ...

  5. Spring+Mybatis整合时 Failed to read candidate component class，Caused by:IllegalArgumentException

    Spring+Mybatis整合时Caused by: java.lang.IllegalArgumentException错误 org.springframework.beans.factory.B ...

  6. day 51 随机验证码, 验证登陆 ,以及 装饰器在函数中的应用

    前端很好的session 的例子 (随机验证码登陆) https://github.com/Endless-Clould/qianduan 参考: 验证码登录 https://www.cnblogs. ...

  7. rabbitmq使用日记

    一.安装 添加安装源 #echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list ...

  8. 剑指offer四十八之不用加减乘除做加法

    一.题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 二.思路 1. 采用位运算的方法,分三步: (1).两个数异或:相当于每一位相加,而不考虑进位 (2).两个数 ...

  9. Django的sitemap

    1.安装 安装Sitemap APP的步骤如下: 在INSTALLED_APPS设置中添加'django.contrib.sitemaps'; 确认你的TEMPLATES设置中包含DjangoTemp ...

  10. Observer观察者设计模式

    Observer设计模式主要包括以下两种对象: (1)被观察对象:Subject,它往往包含其他对象感兴趣的东西,上面例子中热水器中就是Subject(被监视对象); (2)观察对象:Observer ...