1. 美化盒子

1.1. 美化文本

1.1.1. 字体大小【font-size】：

字符框的高度，可继承，默认值medium，16px。基准字号：浏览器设置的默认字体大小，通常为16px，可更改。

预设值

medium

中等字号

large

大字体

smaller

小字号

数值

px【常用】

绝对字体大小

em【常用】

相对于父元素的字体大小，若没有父元素，则使用基准字号

%

原理同em，例如200%，相当于2em，50%，相当于.5em

rem

相对于基准字号

1.1.2. 加粗字体【font-weight】

将【font-weight】设置为【bold】，以加粗文字，该属性可继承，数值从100到900取整。

1.1.3. 倾斜字体【font-style】

将【font-style】设置为【italic】，以倾斜文字，该属性可继承。

1.1.4. 字间距【letter-spacing】

设置【letter-spacing】的值为px或em，可控制文字间的间隙，该属性可继承。

1.1.5. 首行缩进【text-indent】

可实现第一个文字向后缩进。

1.1.6. 给文字划线【text-decoration】

设置【text-decoration】属性，可以给文字划线。取值为underline，line-through，overline。

1.1.7. 修饰首字母【伪元素选择器 ::first-letter】

【::first-letter】可选中元素中的第一个文字

1.1.8. 修饰首行【伪元素选择器 ::first-line】

【::first-line】可选中元素中的第一行文字。

喝牛奶的时间1.1.9. 修饰选中文字【伪元素选择器 ::lection】

【::lection】可选中被用户框选的文字。

1.1.10. 字体类型

概念：衬线字体和非衬线字体，修改字体类型【美妙人生主题曲font-family】，使用【@font-face指令】加载我与世界只差一个你web字体，使用图标字体。

1.2. 美化边框

圆角边框【border-radius】，普通的圆角边框，圆形边框，圆形图片。

1.3. 美化背景

1.3.1. 背景图

使用【background-image】设置背景图片。

使用【background-repeat】设置图片重复方式。

repeat

【默认值】从左到右从上到下重复

no-repeat

不重复

repeat-x

仅在x轴方向上重复

repeat-y

仅在y轴方向上重复

使用【background-position】设置图片在边框盒中的位置，默认值为左上。

预设值

left、right、top、bottom、center

数值

使用数值可实现从雪碧图（sprite）中取得部分图像

示例：

使用【background-size】设置背景图尺寸。

预设值

contain，cover

数值

200px 200px；100% 100%，100% auto

使用【background-attachment】固定背景图

scroll

【默认值】背景图跟随元素移动

fixed

背景图固定

使用速写属性【background】统一设置：background：背景图 位置 / 尺寸 重复方式 固定方式 背景颜色

1.3.2. 背景渐变

线性渐变：【background-image：linear-take的现在分词gradient(…)】径向渐变（圆形渐变）：【background-image：radial-gradient(…)】。

1.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

1.5. 阴影

文字阴影【text-shadow】，盒子阴影【box-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: 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: int 0px 0px 10px 5px rgba(0,0,0,.5)

加入int关键字，可将阴影的扩散方向由向外变为向内。