美化盒子
1.美化文本
第一部分:
字体大小【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字体
使用图标字体
2.美化边框
圆角边框【border-radius】
圆角边框原理图
使用圆角边框的常见场景
普通的圆角边框
圆形边框
圆形图片
3.美化背景
背景图
使用【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:
linear-gradient(to right, red, blue);
径向渐变（圆形渐变）：【background-image：radial-gradient(...)】
background-image:
radial-gradient(lightblue, black)
4.透明度和鼠标样式
透明度【opacity】和alpha通道
使用【opacity】属性，
可调整整个盒子的透明度
该属性的取值范围是0~1
其中，0表示全透明，1表示完全不透明
使用rgba颜色，可调整某个颜色的透明度，
rgba分别表示： r：red，g：green，b：blue，a：alpha
书写格式为：rgba(red, green, blue, alpha)
其中，alpha表示透明通道，取值是0~1之间
0表示全透明，1表示完全不透明
也可以用十六进制表示，例如rgba(0,0,0,0.5)可以写成#00000080
鼠标样式
cursor:auto 默认值
cursor:crosshair十字形
cursor:default
cursor:move
cursor:e-resize
cursor:ne-resize
cursor:nw-resize
cursor:n-resize
cursor:se-resize
cursor:sw-resize
cursor:s-resize
cursor:w-resize
cursor:text
cursor:wait
cursor:helpcursor:pointer浏览器的默认样式中对a元素设置该值
cursor:url(imgs/target.ico), auto
表示使用一个图标来表示鼠标样式
需要注意，图标的文件格式最好是ico或者cur，以避免在某些浏览器中无法显示
另外，图标的尺寸控制在32*32以内
5.阴影
文字阴影【text-shadow】
text-shadow: 2px 2px 4px rgba(0,0,0,.5)
第1个参数：2px，表示阴影的位置向x轴方向（横坐标）的偏移量为2px
第2个参数：2px，表示阴影的位置向y轴方向（横坐标）的偏移量为2px
第3个参数：4px，表示阴影的模糊半径，该数值越大，阴影越模糊
第4个参数：rgba(0,0,0,.5)，表示阴影的颜色
盒子阴影【box-shadow】
box-shadow: 4px 5px 6px rgba(0,0,0,.5)
box-shadow和text-shadow的用法非常类似
它的4个参数分别表示：x轴的偏移量、y轴的偏移量、模糊半径、阴影颜色
box-shadow: 4px 5px 6px 7px rgba(0,0,0,.5)
多了一个参数，最后一个7px表示阴影的扩散半径，该值越大，阴影越大
box-shadow: 0px 0px 6px 7px rgba(0,0,0,.5)
使用该方式可制作一个以盒子为中心的扩散阴影
box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,.5)
加入inset关键字，可将阴影的扩散方向由向外变为向内