css属性分类介绍

css属性分类介绍
css属性分类介绍
CSS分类⽬录
1. ⽂本/字体/颜⾊
1. ⽂本相关
2. 字体相关
3. 颜⾊相关
4. 背景相关
2. ⼤⼩/布局
1. ⼤⼩属性
2. margin 外边距
3. padding 内边距
4. border 边框
5. position 定位
3. 列表/表格
1. 多列属性
2. 可伸缩框属性
3. 列表属性
4. Grid属性
5. Table属性
4. 动画属性
1. Animation 动画属性
2. Transition 过渡属性
CSS属性分类
⽂本/字体/颜⾊/背景
字体类
1. font-family：指定字体
1. 需要考虑客户端机器上是否装有字体
2. 可以排列多个字体，⽤逗号分隔，如果有空格⽤引号分隔
3. 最后⼀个建议放通⽤字体名，这个属性只有⼏个选项：serif | sans-serif | cursive | fantasy | monospace
2. font-size：字体⼤⼩，要注意有绝对⼤⼩，相对⼤⼩，长度，百分⽐
1. ⼀般建议采⽤相对⼤⼩，即em或者rem
2. 典型的长度单位，详细信息请参考
3. font-style：正常体、斜体、倾斜体
4. font-weight：设置粗体
5. font-variant：⽤来将所有字体都变成⼤写，但是原来是⼤写的字体呢⼜要⽐默认的要⼤⼀些
6. font：
1. 简写形式，如上所有跟字体相关的字体混合在⼀起
2. font-family是必选的，⽽且⼀定要在最后；font-size如果有，必须出现在倒数第⼆个, 后⾯可以⽤/跟⼀个line-height的设置
3. 剩下的font-style, font-weight, font-variant就⽆所谓了，前⾯任意排列
4. font还⽀持⼀些类似caption, icon等快捷描述
5. 详细请参考
7. line-height：⼀个数字，默认差不多为1.2，有normal/数字/长度/百分⽐
1. ⼀般建议使⽤纯数字, ⽤长度和百分⽐都在某些特殊情况下超出预期，即⼦元素的⾏⾼被⽗亲元素设置了，同时⼦元素还有默认
的浏览器字体设置的场景。

参考
2. 长度可以参考
8. font-size-adjust：不太常⽤属性，⽤来设置英⽂字体的⼤⼩写字母之间的⾼度⽐例的
⽂本类
1. word-spacing：词和词之间的距离，默认值是由字体来定的，⾃定义可以定义为长度/百分⽐，对于中⽂来讲，也是空格
2. letter-spacing：字母和字母之间的距离，默认值是由字体来定的，可以⾃定义为长度单位
3. word-break：⽂字换⾏逻辑
1. normal：默认值，英⽂空格处换⾏，中⽂任意字符换⾏；
2. break-all：都采⽤中⽂的⽅式任意换⾏；
3. keep-all：都采⽤英⽂的⽅式，中⽂也要遇到了空格或者回车等特殊符号才换⾏
4. break-word：跟normal类似，不过即使min_width(即单个单词的长度)⼤于容器的width的时候，会换⾏，⽽不是超出
4. word-wrap/overflow-wrap：normal/break-word。

word-wrap是overflow-wrap的别名。

逻辑跟如上word-break的break-word的逻辑类
似，要溢出的时候是否换⾏, 详情参考
5. vertical-align: 上下对齐⽅式
1. 只针对display的值为inline和table-cell的元素有效，⽐如span，img，input，td等元素，对于其他块级元素都不⽣效
2. 取值范围为枚举/长度/百分⽐
3. 枚举取值为：baseline(基线默认)/super(上标)/sub(下标)/top(⽗元素顶部)/bottom(⽗元素底部)/middle(⽗元素中部)/text-top(⽂字顶
部)/text-bottom(⽂字底部)
6. text-align: 左右对齐⽅式
1. 也是指针对⾏内元素有效，不能针对块级元素进⾏控制
2. 取值为：left, right, center和justify(两侧对齐)
7. text-transform：⼤⼩写转换
1. 取值为枚举：capitalize：⾸字母⼤写；uppercase/lowercase; none;
8. text-shadow：阴影设置，可以设置阴影的颜⾊，相对原字体的位置，以及模糊半径
9. text-decoration：设置颜⾊、位置、样式。

分别对应了text-decoration-color，text-decoration-line，text-decoration-style
1. 位置可以为：上划线、下划线、删除线、闪烁和⽆
2. 样式可以为：实线(solid)、双实线(double)、dotted(点虚线)、dashed(虚线)、wavy(波浪线)
3. 注意：⽗亲会影响⼉⼦，且⼉⼦⽆法取消
10. text-indent：缩进，段落第⼀⾏⽂本要空多少距离，单位为长度
11. text-justiy：在text-align被设置为justiy的时候⽤来控制是在单词之间加空格(英⽂)，还是在字母之间加空格(中⽂)
12. text-overflow：⽂本溢出的截断，可以⽤'...'来代替，或者⽤⾃⼰定义的字符串来代替超出字符
1. 需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显⽰
13. white-space：控制空格符，"\t", "\n"以及显⽰的时候是否折⾏显⽰的属性
1. normal/nowrap/pre/pre-wrap/pre-line：详情参考
颜⾊&背景类
1. color：背景颜⾊，关于眼⾊的值⼀共有三种，枚举值，#xxx, rgb, hsl，详细请参考
2. opacity：不透明度，即设置颜⾊的透明的程度，0为透明，1为不透明，单独的属性设置和⽤color的rgba函数来设置都⼀样
3. backgroud-color：背景颜⾊
4. backgroud-image：
1. 可以指定多个图⽚，第⼀个图⽚最接近⽤户，border会最后绘制
5. backgroud-clip：背景图⽚延伸到盒⼦模型的范围，到⽂本、到边框内沿，到边框外沿
6. backgroud-origin：跟backgroud-clip类似，只是只作⽤域backgroud-image, 可以取值为border-box, padding-box, content-box
7. backgroud-position：背景图⽚的位置，可以设置为枚举值，也可以设置为相对于左上⾓的坐标，分别为长度单位，这个值⼀般要跟
backgroud-repeat: no-repeat配合使⽤
8. backgroud-size：设置背景图⽚的⼤⼩，可以控制压缩或者截断或者⽐例
1. auto：⾃动
2. cover：图⽚做截断，装满背景，但是背景图⽚可能显⽰不全
3. contain：图⽚不做截断，但是有可能装不满背景
4. 还可以指定长宽来按照指定的⽐例来缩放背景图⽚
9. backgroud-repeat：不重复；沿着x,y轴重复（最后⼀个图⽚可能会被截断）；图⽚不截断，但是中间留空隙；图⽚不截断，同时拉伸/
压缩图⽚保证图⽚之间⽆空隙；
10. backgroud-attachment：背景图⽚是否随着⿏标滚轮⽽变动位置
11. backgroud：如上各个backgroud开头的属性的组合，组合⽐较⾃由，⼀共8个元素：
1. backgroud-color必须出现在最后；
2. 盒⼦属性有backgroud-clip, backgroud-origin，可以出现0,1,2次
3. backgroud-size必须出现在backgroud-position之后，⽤/连接
4. backgroud-image, backgroud-position, backgroud-size, backgroud-repeat, backgroud-attachment 可以任意出现
⽂字连接&⿏标样式
1. a:link ⽂字连接默认格式； a:visited 访问过后的链接样式；a:active ⿏标点击时候的样式；a:hover ⿏标移动上去的样式；
2. ⿏标样式：help 加?；pointer 变为⼿；progress：请等待；wait：系统繁忙；move：拖拽；not-allowed：不能执⾏；等等，详细请参
考
⼤⼩/布局类
⼤⼩属性
1. width/height：包含了width，max-width，min-width⼏个配套的属性，值为长度/百分⽐；同时还可以设置⼀些属性值，⽤于表达width
⽤于内容级别，还是border级别等；
2. max-width/max-height：最⼤宽度/⾼度
3. min-width/min-height：最⼩宽度/⾼度
盒⼦模型类
1. border：包含了粗细、样式、颜⾊。

1. border-width：可以有1~4个长度值。

1个代表4个边；2个的话代表横边和纵边；3个代表上，左&右，下；4个代表上，右，下，
左
2. border-style：可以有1~4个枚举值。

跟text-decoration类似，可以有实线、双实线、虚线、点虚线、波浪线等，还可以有浮雕、
陷⼊、突出等效果；
3. border-color：可以有1~4个颜⾊值。

4. border-image：可以⽤来设置边框的图⽚，⽤来显⽰⼀些⽐较漂亮的边框，图⽚选择哪些部分来作为边框请参考
5. border-radius：⽤来设置圆⾓的
6. box-shadow：边框的模糊划效果，跟text-shadow是类似的效果，可以设置阴影相对位置/阴影模糊半径/扩散半径/阴影颜⾊；2. outline：outline跟border类似, 是画边框的，
1. 跟border的区别是 1. 不占盒⼦模型宽度;
2. 可能不是矩形;
2. 准确来说, outline应该不算是盒⼦模型的属性
3. 跟border类似有, outline-style, outline-color, outline-width三个⼦属性
3. margin/padding：外边距，内边距的属性，可以有1~4个值，不同个数的值代表函数同边；
4. margin-top/margin-bottom/margin-left/margin-right：对应的控制4个边的外边距的属性
5. padding-top/padding-bottom/padding-left/padding-right：对应的控制4个边的内边距的属性
布局类
基础定位类
1. float：浮动属性
2. clear：清除浮动
3. position：位置类型
4. top/left/bottom/right：如果设置了position为⾮static的话，就可以设置这⼏个值来调整div的相对位置
5. display：显⽰类型
6. visibility：是否显⽰，设置为hidden则不显⽰，跟display:none最⼤的区别就在其还是会占据空间；还有个跟表格相关的collapse的选
项；
7. overflow：visible(默认值), 会显⽰出来；hidden, 不显⽰了；scroll，增加滚动条；auto，交给浏览器来判断是否装得下，装不下就加滚
动条；
8. clip：⽤来剪切⼀个形状的属性，可以剪切为圆形，不规则多边形，圆弧等形状
9. transform：对元素属性主要是⽤来对某个元素进⾏旋转，偏移等，demo效果请。

10. z-index：
1. 不同z-index之间的⽐较只针对⽗亲和直属⼦元素，⼀个⽐较好的理解是给理解成⽬录版本号，详细请参考
2. 除了z-index之外，还有其他的⼀些属性也会⽣成⼀个新的层叠上下⽂
1. z-index不为auto：⾮static的元素，或者flex元素
2. opacity⼩于1, 即元素半透明
3. transform不为nong的元素，即有各种⾓度变换的操作等
多列属性
1. columns：像论⽂⼀样将⽂章按照多列的⽅式来展⽰，可以分成任意多列；
2. column-count：分成⼏列来显⽰⽂本
3. column-gap：每⼀列之间的间距⼤⼩
4. column-rule：每⼀列之间的间隔样式(类似border)
5. column-span：可以将某段⽂字横跨所有列, ⽐如标题，或者将⽂章分成⼏个格⼦来展现
6. column-width：每⼀个列的宽度；
Flex布局
⽗亲元素设置
基本属性设置
弹性布局，更多详细请参考
该布局主要⽤于单⾏的横向排版布局, 相⽐于float等布局⽅式主要好处在于其不脱离⽂档流, 控制⽐例⽅便
1. display:flex：将⽗亲设置为 flex 弹性布局
2. flex-direction：row(从左往右), row-reverse(从右往左), column(从上往下), column-reverse(从下往上)
1. 主轴：以从左往右为例, 就是左->右;
2. 交叉轴：就是垂直于主轴的⽅向，以rtl为例, 就是上->下；
3. 起始和终⽌：以左->右布局为例, 起始就是左边交叉轴->右边交叉轴;
4. 主轴和交叉轴概念很重要，因为各种属性都是控制区块是如何在主轴和交叉轴上⾯分布的；
3. flex-wrap：沿着主轴的元素如果超出⽗元素宽度之后，是否⾃动折⾏显⽰新⼦元素，默认不折⾏，直接超出⽗元素显⽰；
1. wrap：换⾏；nowrap：不换⾏；
4. flex-flow：将flex-direction和flex-wrap合起来的简写属性；
元素对齐与空间分配
1. align-items：元素在交叉轴上的⾼度控制
1. flex-start：顶部对齐，不⾃动拉伸⾼度
2. felx-end：底部对齐，不⾃动拉伸⾼度
3. center：中间对齐
4. stretch：默认值，⾃动拉伸占满所有⾼度
2. justify-content：在主轴上的布局⽅式
1. flex-start：靠左对齐
2. flex-end：靠右对齐
3. center：居中
4. space-round：平均分布，左右也留⽩
5. space-between：平均分布，左右对齐边界
3. align-content：对于多⾏的flex容器设置⾏与⾏之间的排布
⼦元素宽度属性
占据宽度设置
1. flex-bias：⽤来决定⼦元素的初始长度
1. 默认为auto，意思是让浏览器来决定宽度，如果设置了width，就⽤；否则就浏览器⾃⼰计算；
2. 也可以⼈⼯指定绝对值或者百分⽐（相对⽗亲），⽤来⼿动指定宽度
2. flex-grow：⼀个绝对的数字，如果⼦元素之和没有⽗元素宽的话，就⽤这个数字的相对⽐例来决定每个元素如何分配剩下的空间
3. flex-shrink：跟flex-grow类似，只不过是⼦元素之和⼤于⽗元素的时候，怎么压缩，不过压缩不会⽆限制压缩，每个元素都会有个最⼩
宽度。

1. 具体grow和shrink在实际应⽤当中的表现可以参考
4. flex：如上三个属性的简写，可以为枚举值或者1~3个数字
1. auto：相当于1 1 auto，即⾃动伸长，也⾃动伸缩，宽度由浏览器决定
2. initial: 默认值, 相当于0 1 auto, 即不⾃动伸长，但是⾃动收缩，宽度由浏览器决定
3. none：相当于0 0 auto，即不⾃动伸长，也不⾃动收缩，宽度由浏览器决定
4. 如果是⼀个值：
1. 如果是⼀个⽆单位的数，会被当成flex-grow的值
2. 如果是⼀个长度/宽度单位，会被当成flex-bias的值
5. 如果是两个值：
1. 第⼀个值必须是⼀个⽆单位的数，当成是flex-grow的值
2. 第⼆个值可以是：
1. ⼀个⽆单位的数，当成是flex-shrink的值
2. ⼀个长度/宽度单位，会被当成是flex-bias的值
6. 如果是三个值
1. 第⼀个值必须是⽆单位的数，会被当成flex-grow的值
2. 第⼆个值必须是⽆单位的数，会被当成是flex-shrink的值
3. 第三个值必须是长度/宽度单位或者枚举值，被当成flex-bias的值
4. 占据⾼度设置
5. align-self：在⼦元素上⾯设置元素在交叉轴上⾯的⾼度控制
1. 默认为⽗亲的align-items的值
2. 如果设置了，就覆盖⽗亲的值，值得取值范围和含义跟align-items⼀模⼀样
3. 排序设置
6. order：如果⼦元素设置了该属性，则各⼦元素按照order值排序，否则按照⽂档出现的先后顺序排序
⽹格布局
⽹格布局跟Flex弹性布局是类似的，都是css3新出的属性。

Flex主要针对的是单⾏的布局，⼀般不会换⾏。

Grid主要针对的是表格类多⾏布局，可以将其想象成在css中控制类似excel的表格。

相⽐于普通的html中的table布局，Grid布局⼀⽅⾯主要是在 css 中控制表格效果，另⼀⽅⾯是在合并单元格⽅⾯⽐表格布局会更灵活。

更多跟Grid布局相关的信息，请参考
⽗亲属性
1. display: grid：将⽗亲设置为表格布局属性，所有其直属⼉⼦都会按照表格⽅式布局
2. grid-template-columns：将表格分为多少列
1. 可以直接写100px, 100px, 100px 将表格分为三个 100px 的列
2. 也可以写 1fr, 1fr, 1fr 将表格均分为三个相同的列，主要 fr 是专门为grid布局新出的⼀个单位
3. 也可以写 repeat(3, 1fr) 达到跟上⾯⼀样的效果，这样可以减少书写的量
4. 还可以为每条线命名，这样⼉⼦就可以不⽤坐标，⽽⽤名字来定位，有的时候这样代码会更可读⼀些，⽐如
1. grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
3. grid-template-rows：将表格分为多少⾏，同上
4. grid-auto-rows：设置每⼀⾏的⾼度，可以⽤minmax(100px, auto)来设置为最少100px, 最⾼就让浏览器⾃⼰设置
5. grid-auto-columns：同grid-auto-rows
6. grid-column-gap：列与列之间的宽度，⼀个长度单位
7. grid-row-gap：⾏与⾏之间的宽度，⼀个长度单位
8. grid-gap：如上两个属性的简写
1. 如果只有⼀个值，会同时应⽤到⾏与列的间距
2. 如果有两个值，第⼀个⽤到⾏，第⼆个⽤到列
9. grid-template-areas：这个是基于命名⽹格的定位，在该属性中将所有单元格属于哪个⼉⼦都写出来，详情请参考
⼉⼦属性
⼉⼦定位默认是从左到右，从上到下，按照单元格依次排布的。

⽽Grid属性最⼤的作⽤就是可以弹性布局，即合并单元格，每个⼉⼦可以指定⾃⼰所占据的单元格的区间。

设置的⽅式有多种：
1. grid-column-start/grid-column-end/grid-row-start/grid-row-end：这四个属性就对应了横纵坐标轴(注意，是从1开始)
1. 默认每个⼉⼦只占⼀个单元格，所以如果只写了start，不写end的话，默认end就是start+1；同样，如果只写了end的话，start就
是end-1
2. 坐标可以设置为负数，即导数第⼏个坐标
2. grid-column/grid-row的简写，如下：
1. grid-column: 1 / 2
2. grid-row： 1 / 4
3. 可以⽤span关键字来改为start/start+_span_的⽅式来设置单元格属性，这样可以专注单元格⼤⼩，⽰例如下：
1. grid-column: 1 / span 1
2. grid-row: 1/ span 3
3. 效果跟上⾯两⾏效果是⼀样的
3. grid-area属性，如下：
1. grid-area：1 / 1 / 4 / 1
2. 该属性是按照上/左/下/右的顺序来写的，跟margin正好是反⽅向的
表格布局
表格布局是很⽼很早的布局了，其布局结构主要在html中控制，css中有如下的⼏个属性来控制表格的⾏为：
⽽现在表格⼀般不⽤来布局了，主要还是⽤来做表格类数据的呈现。

1. border-collapse：控制单元格之间的边框是否合并，默认不合并，但是⼀般都要设置为合并；
1. 默认为seperate，合并为collapse
2. border-spacing：跟grid-gap类似，设置的单元格之间的间距，如果是⼀个值就是统⼀设置，如果是两个值就是先⾏后列
1. 如果设置了border-collapse属性，就会忽略border-spacing的属性
3. empty-cells：在没有内容的单元格周围是否绘制边框
1. show：绘制，默认值
2. hide：不绘制
3. 如果设置了border-collapse为collapse的话，就会忽略该属性
4. caption-side：可以在html中⽤caption添加⼀个标题，然后这个属性是⽤来控制该标题的位置，是位于表格的上⾯还是下⾯
5. top：顶部
6. bottom：底部
7. table-layout：⽤来设置单元格的布局宽度⾼度的算法
1. auto：⾃动设置，默认值
1. 某列宽度由没有折⾏的最⼤宽度来决定，即使设置了width也没⽤
2. 该算法较慢，因为要遍历完所有内容才能决定每⼀列的宽度，在主要以呈现数据为主的页⾯中不建议使⽤
2. fixed：固定宽度
1. 跟单元格内内容⽆关，就跟表格⾃⾝设置的⾼度宽度⽐例有关
动画属性
animation
animation属性的动画原理是在⼀段时间之内修改某个元素的属性，然后浏览器会⾃动的将修改属性在这段时间之内均匀化，看起来就是⼀个⽐较均匀的动画效果了。

最简单的动画就是设置调整位置属性，然后就可以均匀的上
下或者左右移动了。

1. @keyframes
动画的关键帧配置，类似⼀个函数，将动画的关键时间点对应的属性信息给标注上，配置⽰例如下：
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
最终的动画效果。

1. animation-name：即指定的keyframes的名字，如上的例⼦就是 mymove
2. animation-duration：动画的持续时间，我估计浏览器会根据这个时间来计算需要⾃动计算的帧数，因为⼈眼睛需要每秒24帧的变化才
能显⽰出⽐较平滑的动画效果；
3. animation-timing-function：动画的变化的速度曲线，可以是线性的，或者⼀开始慢后⾯快，或者反过来，或者先慢后快结束的时候再
慢等选项，也可以通过指定三次贝塞尔函数cubic-bezier(n,n,n,n)来选择不同的动画效果；
4. animation-delay：在动画开始之前的延迟；
5. animation-iteration-count：默认为1，可以为任意整数，也可以设置为枚举值infinite从⽽⽆线循环；
6. animation-direction：枚举值，默认为normal，即正常播放动画，可以设置为alternate该值得含义是奇数次正向播放，偶数次反向播
放；当然，如果animation-iteration-count设置为1的话，该属性就没有意义了；
7. animation-play-state：paused和running的枚举值，可以对动画进⾏暂停和继续的操作，类似视频播放的感觉；
8. animation-fill-mode：在动画开始之前和之后属性的应⽤值；
9. animation：综合如上所有属性的⼀个简写属性
1. 各简写属性出现的顺序并没有明确规定，⽽且没有任何⼀个属性是必须的；
2. 只有时间的值可能会出现0，1,2次，当出现1次的时候表⽰的是animation-duration的值，如果出现2次代表的是animation-delay的值
3. 可以有多组值，⽤逗号做分割，表⽰多个动画效果同时显⽰和起作⽤
transition
1. transition-property：对该元素哪个属性的变化进⾏动画效果
1. 当然，不是所有的属性都⽀持动画的，常见的位置、⼤⼩、颜⾊、以及旋转之类的都是⽀持的，详细⽀持列表请
2. 只要属性发⽣变化，都会实现动画效果，⽐如hover属性或者js变化属性
2. transition-duration：动画的持续时间
3. transition-delay：动画开始的延迟时间
4. transition-timing-function：动画的速度函数，可以是匀速，也可以是变速，也可以是指定函数
5. transition：是如上⼏个属性定的简写属性
1. ⼏个属性出现的顺序没有明确规定，如果是时间字段的话，第⼀个是duration，第⼆个是delay-time
2. ⼀些常见的动画效果⽰例请。

其他
1. 长度：长度是css的基本单位，会有如下的⼀些可能的值：
1. 会⽤到长度单位的典型的属性：
1. font-size, width, margin, padding, border-width, text-shadow
2. 相对单位
1. cap：相对当前字体的⼤写字母的⾼度
2. ch：相对字体当中0的⾼度
3. ex：相对字体当中⼩写x字母的⾼度，⼀般字体的ex≈0.5em
4. lh/rlh：相对当前⾏⾼/跟节点⾏⾼
5. em/rem：相对当前字体/根节点字体
3. 绝对单位
1. px：⼀个像素点，跟设备相关，⼀般1cm约等于35~45个像素点
2. Q/mm/cm：0.25毫⽶/毫⽶/厘⽶
3. pt/in：1/72英⼨ / 英⼨
4. pc：12px
4. 视窗单位
1. vh/vw：相对视窗的⾼度/宽度的1/100
2. vmin/vmax：在视窗的min(⾼度, 宽度)和max(⾼度, 宽度)的1/100
在实际应⽤场景中，主要使⽤的是em和px两个类型的长度。

1. 颜⾊：
1. 枚举值
1. ⽐如red, blue, yellow⼀共⼤概有将近150个预定义的颜⾊，详细请参考
2. RGB⽴体坐标
1. RGB || #RRGGBB
1. 当设置为#RGB的时候，跟#RRGGBB是⼀样的，⽐如#F03，效果跟#FF0033是⼀样的
2. 可以⽤rgb(r_int, g_int, b_int)来表⽰，跟上⾯表⽰是类似的，只不过⼀个⽤的是16进制，⼀个⽤的是⼗进制
3. 可以⽤rgba(r_int, g_int, b_int, 透明度)，透明度得分从0~1的浮点数，0是透明，1是不透明
3. HSL圆柱坐标
1. hsl(⾊相, 饱和度, 明度)
1. ⾊相是⼀个彩虹圆环的⾓度值，red为0/360，green为120，blue为240；
2. 饱和度是颜⾊的显⽰强度，如果为0就是⿊⽩照⽚即某种灰⾊
3. 明度是明亮度，如果是100%，就是⽩⾊了，如果是0%，那就是⿊⾊了
2. hsla，跟rgba⼀样可以增加⼀个透明度的参数
2. 渐变函数
1. 渐变函数是⼀种⾃定义的image表⽰⽅法，使⽤⽰例参考
2. 直线渐变：linear-gradient(⾓度，⽅向，颜⾊列表)，在颜⾊后⾯还可以跟⼀个⽐例表⽰位置从什么地⽅开始渐变
3. 圆形渐变：radial-gradient(颜⾊列表)
4. 重复渐变：重复渐变（即条纹装渐变）
参考
1. CSS属性的⾼级分类.
2. CSS属性参考页⾯.。