总结CSS3新特性(颜色篇)-阿里云开发者社区

开发者社区> 贾顺名> 正文

总结CSS3新特性(颜色篇)

简介: 颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.
+关注继续查看

颜色:

CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值;

hsl():

hsl函数:h(色调),s(饱和度),l(亮度);

色调:为0-360之间的数值[经实验,可以为小数];

饱和度与亮度:均为百分比;

下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL

当亮度为100%时为白色,当亮度为0%为黑色;

饱和度100%以及亮度50%时生成的颜色均为web安全色

rgb():

rgb函数:r(red),g(green),b(blue)[计算机三原色];

值可以为0-255任意整数或百分比;

如超出范围,取最近的有效值:

em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

下图截自http://www.w3.org/wiki/CSS/Properties/color/RGB

有一点需要注意,百分比与数值不能同时出现在一个rgb函数中;

rgba()与hsla():

这两位与上边两位的区别在于后边的a(alpha)透明度;

透明度为0-1之间的数值,0为全透明,1为全不透明,利用透明度可以做出很多好看的效果

一个简单的例子(当然了- -这个例子不算好看)

 

上例中用到了一个类似于变量的单词(currentColor[大小写不区分])

currentColor可用于所有设置颜色属性的地方.

取值为当前元素的color属性值,如果没有,寻找父级,一直到根元素,如果都没有设置的话,不要担心,还有浏览器代理的默认颜色.

w3官方有一个简短的解释,如果元素color属性值为currentColor的话,则视为 'color:inherit';

比较实用的一个地方就是,设置元素边框颜色,颜色(color),等等属性时,只需设置颜色(color);后续更改时也只需修改一处,子元素也可直接继承使用currentColor,但需要确保子元素没有显示声明color属性值;

还有用到了两个长度单位(vw,vh)取值范围[0-100]

100vw为屏幕宽度;

100vh为屏幕高度;

还存在两个值,vmax与xmin,分别是取出宽高最大或最小值;

vw与vh可参与calc()的计算;

顺便介绍下 opacity:

opacity用来设置元素的透明度:(取值为0-1)

IE8可用替代的 

 filter:Alpha(opacity=50) /*0-100*/

来实现透明度;

颜色基本上就这些了,如有错误或补充还请指出(无视transparent...)

参考资料

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
总结CSS3新特性(Transform篇)
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg ...
667 0
[转帖]ASP.NET 2.0中CSS失效的问题总结
ASP.NET 2.0中CSS失效的问题总结 经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决方法罗列如下: 1,CSS文件路径不正确 这个问题属于Web开发中的基础问题,一般采用相对路径会出现这样的问题,或者样式文件写在了母版页里面,在内容页与母版页不在同一级目录下时会出现这样的问题。
637 0
总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。
705 0
总结CSS3新特性(媒体查询篇)
CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围...
767 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(九)
Spring Cloud微服务架 Spring Cloud微服务架构设计与开发实战课时1.9—微服务架构中的经典设计模式 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
80 0
开发者学堂课程干货总结——Java 虚拟机原理(五)
Java 虚拟机原理课时1.5——Dragonwell特性:JWarmup。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
66 0
开发者学堂课程干货总结——Java 虚拟机原理(六)
Java 虚拟机原理课时1.6——Dragonwell特性:Wisp。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
72 0
《Ext JS权威指南》——3.4节调试工具的总结
本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.4节调试工具的总结,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看
895 0
+关注
贾顺名
JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载