【快速了解CSS3当中的HSLA 颜色值怎么算】的更多相关文章

快速了解CSS3当中的HSLA 颜色值怎么算

CSS3文档中提到:(HSLA) H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色.360度也是红色. S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高 L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮. A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明. 这样一说大家肯定是很迷的一个概念 举点例子吧:(只要区分中间的百分比值) 这是标准的绿色值: background-…

CSS3:HSL和HSLA

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3:HSL和HSLA</title> <style type="text/css"> body{ background-color: #c8c8c8; background-color: hsl(0,0%,78%); col…

CSS3—HSL与HSLA属性

㈠HSL(H,S,L) ⑴通过对色相(H).饱和度(S).明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色 ⑵取值 H:Hue(色调).0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色.取值为:0 - 360 S:Saturation(饱和度).取值为:0.0% - 100.0% L:Lightness(亮度).取值为:0.0% - 100.0% ⑶兼容性 浅绿 = 支持 红色 = 不支持 粉色 = 部分支持 ⑷示例: <!DOCTYPE h…

CSS3总结 （帅哥）

第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1 CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2 如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的 第2章准备工作 2.1 统一环境 由于CSS3兼容性问题的普遍存在,为了避免因兼容性带…

HTML5和CSS3基础教程(第8版）-读书笔记(2)

第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block). 选择器决定哪些元素受到影响:声明块由一个或多个属性 - 值对(每个属性 -值对构成一条声明,declaration)组成,它们指定应该做什么. 声明块内的每条声明都是一个由冒号隔开.以分号结尾的属性- 值对. 声明的顺序并不重要,除非对相同的属性定义了两次. 在样式规则中可以添加额外的空格.制表…

CSS3基础入门01

CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨按照选择器.布局.样式等分类来学. 主流浏览器和浏览器前缀 目前来讲,主流浏览器包括谷歌浏览器.火狐浏览器.safari浏览器.opera浏览器和ie浏览器. 而五大浏览器又对应着不同的内核: •Trident IE •Gecko firefox •Presto opera •Webkit (Saf…

前端CSS3笔记

第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2   如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的 第2章准备工作 2.1   统一环境 由于CSS3兼容性问题的普遍存在,为了避免因兼容性…

Css3新特性总结之边框与背景（一）

本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%):l:亮度(0%~100%):a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border):padding-box(背景颜色扩散到padding):content-box(背景颜色扩展到content) 示例代码: width:200px; he…

css3新特性

1.css3选择器   我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: Body > .mainTabContainer div > span[5]{ Border: 1px solod red; Background-color: white; Cursor: pointer; } 1. "body"标签直接子元素里 class 属性值为"mainTabContainer"的所有元素 A 2. A 的…

熟悉css/css3颜色属性

颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & HSLA 颜色名 十六进制色 个人最喜欢的一种颜色表达方式. 十六进制颜色是这样规定的:#RRGGBB,其中的RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介于 0 与 FF 之间. 生成随机颜色: function getRandomColor() { return '…