颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            /*
                颜色单位
                    在css中可以世界使用颜色名设置各种颜色
                        比如: red yellow green blue 
                        但是在css中直接使用颜色名是非常不方便
                    
                    RGB值
                        - RGB通过三种颜色的不同颜色来调配出不同的颜色
                        - R red ,G green ,B blue
                        - 每一种颜色的范围在 0~255(0% ~100%)之间
                        - 语法 RGB(红色,绿色,蓝色)
                            都为255颜色为白色,都为0颜色为黑色
                    
                    RGBA
                        - 就是在rgb的基础上增加了一个a表示不透明度
                        - 需要四个值, 前三个和rgb一样, 第四个表示不透明度
                            1表示完全不透明 0表示完全透明 0.5半透明

                    十六进制的RGB值
                        -语法 #红色绿色蓝色
                        -颜色浓度通过 00-ff
                        -如果颜色两位数位置可以进行简写
                            #aabbcc --> #abc

                    HSL值 HSLA值
                        H 色相(0-360)
                        S 饱和度 颜色的浓度(0%-100%)
                        L 亮度 颜色的亮度(0%-100%)
             */
            background-color: red;
            background-color: rgb(254, 100, 100);
            background-color: rgba(90, 90, 90, .5);
            background-color: #ffff00;
            background-color: #bfa;
            background-color: hsl(10, 100%, 50%);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
posted @ 2021-03-03 16:17 博客帅帅阅读(96) 评论(0) 收藏举报
刷新页面返回顶部
博客帅帅

颜色

公告
