码迷,mamicode.com
首页 > Web开发 > 详细

CSS3新增颜色属性

时间:2016-02-21 17:16:34      阅读:572      评论:0      收藏:0      [点我收藏+]

标签:

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

<!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新增颜色属性

标签:

原文地址:http://blog.csdn.net/liuyan19891230/article/details/50708306

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!