CSS3新增颜色属性
2016-02-21 15:19
525 查看
CSS颜色属性复习
color name 颜色英文名称命名(如red,blue,pink,white等)HEX方式 十六进制方式(#FF0000,#B9B9B9等)
rgb方式 三原色配色方式(rgb(255,0,00))
这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式。CSS3中新增了几种颜色属性。
CSS3新增颜色属性
1、RGBA模式2、HSL模式
3、HSLA模式
1、RGBA模式
rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝三色,取值范围均为0~255.
2、HSL模式
H: Hue(色调)。
0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S: Saturation(饱和度)。取值为:0.0% - 100.0%
L: Lightness(亮度)。取值为:0.0% - 100.0%
3、HSLA模式
HSL与HSL模式的相同,增加A,即透明度
A: alpha 透明度 0~1之间
HSL的色轮如下:
举例看个HSLA
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="刘艳"> <title></title> <style> div{width:100px;height:100px;background: HSLA(0,100%,60%,0.5);} </style> </head> <body> <div></div> </body> </html>
效果:
个人觉得HSL与RGB和HEX相比,颜色更容易记忆,但是鉴于通过我们都是使用取色器,所以觉得意义不大,还是会继续使用RGBA和HEX方式。而HSL和HSLA仅是做一个了解。
相关文章推荐
- css3实现动画效果(transform translation @keyframes)
- CSS 三角形绘制方法
- 我的百分比数据盘(样式优美)
- 利用CSS3实现图片切换特效
- CSS框模型笔记
- css3 calc()
- 自己动手丰衣足食之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
- [置顶] 自己动手丰衣足食之气泡框和常见css图形(三角)
- block,inline和inlinke-block元素对比
- css3开关按钮
- CSS样式_列表表格轮廓
- NEC 框架规范 css function
- [前端]css前端样式的模块化
- 个人总结之SpannableString,处理textview不同样式
- css3D效果
- CSS清浮动处理(Clear与BFC)
- CSS3新增文本属性详述
- CSS3渐变——线性渐变
- css设计指南-笔记5
- css设计指南-笔记4