这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

伪类选择器

• :link 未访问的链接
• :visited 已访问的链接
• :hovor 鼠标滑过的链接
• :active 访问过的链接

---

• :focus 选取获得焦点的表单元素

  使用方法举例：input:focus {backfround-color: yellow;}

---

盒子模型

边框

• border-width 边框粗细
• border-style 边框样式
  • none 没有边框，忽略边框的宽度（默认值）
  • solid 边框为单实线
  • dashed 边框为虚线
  • dotted 边框为点线
• border-color 边框颜色

内边距

• padding-left 左内边距
• padding-right 右内边距
• padding-top 上内边距
• padding-bottom 下内边距

---

写法：一个值表示上下左右；两个值第一个值表示上下，第二个值表示左右 三个值第一个值表示上，第二个表示左右，第三个表示下；四个值分别表示上右下左。

外边距

• margin-left
• margin-right
• margin-top
• margin-bottom

居中写法

1. 盒子必须指定宽度
2. 左右外边距设为auto

---

清除内外边距

* { padding: 0; margin: 0;}

圆角边框

border-radius

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须；水平阴影位置，允许负值
v-shadow	必须；垂直阴影位置，允许负值
blur	可选；模糊距离
spread	可选；阴影尺寸
color	可选；阴影颜色
inset	可选，将外部阴影改为内部阴影

文字阴影

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必须；水平阴影位置，允许负值
v-shadow	必须；垂直阴影位置，允许负值
blur	可选；模糊距离
color	可选；阴影颜色