1、font

font简写中size和family位置固定 size在前 且都不可省略
font-style：字体样式
normal—— 默认值。浏览器显示一个标准的字体样式。
italic——浏览器会显示一个斜体的字体样式。
oblique——浏览器会显示一个倾斜的字体样式。
inherit——规定应该从父元素继承字体样式。

font-variant：设置小型大写字母
normal——默认值。浏览器会显示一个标准的字体。
small-caps——浏览器会显示小型大写字母的字体。
inherit——规定应该从父元素继承 font-variant 属性的值。

font-weight：字体粗细
normal——默认值。定义标准的字符。
bold——定义粗体字符。
bolder——定义更粗的字符。
lighter——定义更细的字符。
inherit——规定应该从父元素继承字体的粗细。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

font-size/line-height：字体大小和行高

font-family：字体类型
规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

CSS抗锯齿 font-smoothing 属性介绍

-webkit-font-smoothing：字体抗锯齿
使用后字体看起来会更清晰

• none ------ 对低像素的文本比较好
• subpixel-antialiased ------默认值
• antialiased ------抗锯齿很好

body {
-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale; /*firefox*/
}

2、颜色形式

颜色英文名：white
#ffffff
#fff
rgb（255，255，255）
rgba（255，255，255，1）

hsl（颜色（0 到 360，递增为：红 0 橙 30 黄 60 绿 120 青 180 蓝 240 紫 300），饱和度（0% 到 100%），明度（0% 到 100%））
注意：明度默认是 50%，一般建议保留 50% 的值
hsl（360，100%，50%）
hsla（360，100%，50%，1）

3、颜色渐变

添加渐变：渐变不是一个单一色，所以需要使用 background

渐变兼容：

/*以线性渐变为例，后面的渐变兼容一样，加前缀*/
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

线性渐变

linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置…)

方向：

• to top:0deg
• to right:90deg
• to bottom:180deg (默认值)
• to left:270deg

位置：

• 从0%开始，到100%终止
• 中间颜色可通过%调节占比

#grad {
background: linear-gradient(red, blue);
}
#grad {/*左右线性渐变*/
background: linear-gradient(to right, red , blue);
}
#grad {/*对角线线性渐变*/
background: linear-gradient(to bottom right, red , blue);
}
#grad {/*角度线性渐变*/
background: linear-gradient(180deg, red, blue);
}
#grad {/*重复线性渐变*/
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变：

radial-gradient(形状 大小 at 坐标，开始颜色 位置，颜色2 位置，颜色3 位置…)
注意:前三个位置固定不可变动

形状（可选）：

• ellipse：椭圆形 （默认值）
• circle：圆形
• 如果元素形状为正方形，则 ellipse 和 circle 显示都一样

at 坐标（可选）：

• 默认在正中心
• 可以赋值坐标（参照元素左上角）：radial-gradient(at 30px 30px, red, blue)
• 也可以赋值关键字（left center right top bottom）

大小（可选，类似 Photoshop 中，沿坐标拉径向渐变到下面的四个选项位置）：

• closest-side：最近边
• farthest-side：最远边
• closet-corner：最近角
• farthest-corner：最远角 （默认值）

#grad {
background: radial-gradient(red, green, blue);
}
#grad {/*颜色不均匀径向渐变*/
background: radial-gradient(red 5%, green 15%, blue 60%);
}
#grad {/*设置形状circle ellipse（椭圆）*/
background: radial-gradient(circle, red, yellow, green);
}
#grad {/*设置位置*/
background: radial-gradient(at 30px 30px,red,blue);
}
#grad {/*设置大小 (全设置)*/
background: radial-gradient(circle closest-side at 30px 30px,red,blue);
}
#grad {/*重复径向渐变*/
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

4、字体对照表