总结CSS3新特性(颜色篇)

颜色:

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...)

参考资料

时间: 2024-10-08 19:55:30

总结CSS3新特性(颜色篇)的相关文章

总结CSS3新特性(Transform篇)

概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg #demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/ } 缩放(scale): scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正

总结CSS3新特性(Animation篇)

动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/ } 由于是CSS3,所以不出意外的各种前缀: --图片来自MDN,CSS中的关键帧 单个帧中可填写多个属性,而且不需要保证一致,如: @-web

总结CSS3新特性(选择器篇)

CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/ } [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如

个人总结(css3新特性)

1.前言css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画.个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3.写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻

Atitti css3 新特性attilax总结

图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)15 线性渐变15 径向渐变16 CSS3 的阴影(

[转]深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用 C

深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏 览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用

[C++11新特性]第二篇

0.可变数量参数,可变函数模版,变长模版类 c++98可变数量参数 #include<cstdio> #include<cstdarg> double SumOfFloat(int count, ...) { va_list ap; double sum=0; va_start(ap,count); for(int i=0;i<count;i++) sum+=va_arg(ap,double); va_end(ap); return sum; } int main() { p

CSS3新特性简介

1.CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius:box-shadow:border-image 2.CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制.background-size:background-origin 3.CSS3 文本效果:CSS3 包含多个新的文本特性.text-shadow:word-wrap 4.CSS3 @font-face规则:可将设计师希望使用的字体文件存放到web服