美化文本
字体大小 font-size 含义：字符框的高度可继承默认值：medium
取值 预设值 了解
medium：中等字号larger：大字号smaller：小字号
数值
px 常用 ：绝对字体大小
em 常用 ：相对于父元素的字体大小，若没有父元素，则使用基准字号：基准字号：浏览器设置的默认字体大小，通常为16px，可更改
%：原理同em，例如200%，相当于2em，50%，相当于.5em
rem：相对于基准字号
加粗字体 font-weight 将 font-weight 设置为 bold ，以加粗文字，该属性可继承
倾斜字体 font-style 将 font-style 设置为 italic ，以倾斜文字，该属性可继承
字间距 letter-spacing 设置 letter-spacing 的值为px或em，可控制文字间的间隙，该属性可继承
首行缩进 text-indent 可实现第一个文字向后缩进
给文字划线 text-decoration 设置 text-decoration 属性，可以给文字划线
修饰首字母 伪元素选择器 ::first-letter - ::first-letter 可选中元素中的第一个文字
修饰首行 伪元素选择器 ::first-line ::first-line 可选中元素中的第一行文字
修饰选中文字 伪元素选择器 ::selection ::selection 可选中被用户框选的文字
字体类型
概念：衬线字体和非衬线字体
修改字体类型 font-family
使用 @font-face指令 加载web字体使用图标字体
美化边框
圆角边框 border-radius
事实上，border-radius是一个速写属性，真实的属性如下：
border-top-left-radius：左上角样式
border-top-right-radius：右上角样式
border-bottom-left-radius：左下角样式
border-bottom-right-radius：右下角样式
但通常情况下，我们都是使用border-radius进行统一设置。
圆角边框原理图
美化背景
背景图
使用 background-image 设置背景图片/使用 background-repeat 设置图片重复方式
repeat： 默认值 从左到右从上到下重复
no-repeat：不重复
repeat-x：仅在x轴方向上重复
repeat-y：仅在y轴方向上重复
使用 background-position 设置图片在边框盒中的位置
预设值：left、right、top、bottom、center
使用数值可实现从雪碧图（Sprite）中取得部分图像
使用 background-size 设置背景图尺寸
预设值
数值
使用 background-attachment 固定背景图
scroll： 默认值 背景图跟随元素移动
fixed：背景图固定
使用速写属性 background 统一设置-background：背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
使用多背景图
背景渐变
线性渐变： background-image：linear-gradient(...)
径向渐变（圆形渐变）： background-image：radial-gradient(...)
透明度和鼠标样式
透明度 opacity 和alpha通道
鼠标样式：Icon
阴影
文字阴影 text-shadow
盒子阴影 box-shadow