第7章 · 背景·边框·效果

7.1背景五件套：image / size / position / repeat / color

背景图三连问：图多大（size）、放哪里（position）、要不要平铺（repeat）。

平铺波点 pattern

cover · 铺满裁切

多层背景叠加

/* 波点：小圆点 + 平铺 */
.bg-repeat {
  background-image: radial-gradient(
    circle, #B04A2C 2px, transparent 2.5px);
  background-size: 16px 16px;   /* 平铺单元 */
}

/* 封面图：cover 铺满 + center 取中 */
.bg-cover {
  background-image: url(bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 多层背景：先写的在最上层 */
.bg-multi { background-image:
  radial-gradient(...), linear-gradient(...);
}

size 三档记忆：cover 裁切铺满（不变形、可能裁掉边）、contain 完整显示（可能留白）、100% 100% 铺满但可能变形。

7.2渐变背景：linear 与 radial

渐变是「函数生成的图」，不是图片文件——任意缩放不糊，还能当分隔条、按钮底色。

135° 双色

硬分段进度条

radial 光晕

/* 方向角度 + 色标列表 */
.g1 { background: linear-gradient(135deg, #B04A2C, #8F5E0F); }

/* 色标可以「两色紧贴」= 硬边界，
   做分段进度条不用写两个 div */
.g2 { background: linear-gradient(90deg,
        #B04A2C 0 40%,        /* 0~40% 红 */
        #E7DDCA 40% 60%,      /* 40~60% 米 */
        #3F6E6A 60% 100%); }  /* 60~100% 绿 */

/* 径向：圆心位置 + 颜色 */
.g3 { background: radial-gradient(
        circle at 30% 30%, #F3E0D5, #B04A2C); }

7.1 的波点就是 radial-gradient 当「画笔」用的——渐变不只是装饰，还是低成本画图形的手段。

7.3border-radius：从直角到圆形到胶囊

一个属性覆盖方→圆→圆→胶囊，四个值按「左上 / 右上 / 右下 / 左下」顺时针给。

0

10px

50%

胶囊 999px

40/10 交替

.rd          { border-radius: 0; }      /* 直角 */
.rd-10       { border-radius: 10px; }   /* 统一圆角 */
.rd-circle   { border-radius: 50%; }    /* 正方形→圆 */
.rd-capsule  { border-radius: 999px; }  /* 按钮胶囊 */

/* 四角不同：左上 右上 右下 左下 */
.fancy { border-radius: 40px 10px 40px 10px; }

/* 头像圆角：50% 比 999px 语义清晰 */
.avatar { border-radius: 50%; }

胶囊按钮写 999px 而不是「高度一半」——高度怎么变都自动是胶囊，一劳永逸。

7.4box-shadow：立体感的三档层次

x 偏移 y 偏移模糊扩散颜色。离「纸面」越高，阴影越大越淡——这是拟物的基本逻辑。

elev-1 微浮

elev-2 卡片

elev-3 弹层

.sh1 { box-shadow: 0 1px 3px rgba(43,37,32,.15); }
.sh2 { box-shadow: 0 4px 12px rgba(43,37,32,.12); }
.sh3 { box-shadow: 0 12px 28px rgba(43,37,32,.16); }

/* 语法：x y blur spread color
   x=0 y=0 只留模糊 → 四周均匀光晕
   负 spread 可以把阴影收窄 */

/* 网站约定：静态卡不发影，
   hover 时才升到 elev-2 */

阴影色用 半透明黑（rgba）而不是灰色——在米色底上灰影会发脏，透明黑永远自然。

7.5border 的妙用：宽 0 画三角形

盒子没有内容时，四条 border 在角上「对折」——只留一条，其余透明，就是三角形。

← 两个「0×0 的盒子」，
边框互相挤压出斜边

/* 上指三角：只留 border-bottom */
.tri-up {
  width: 0; height: 0;
  border-left:   22px solid transparent;
  border-right:  22px solid transparent;
  border-bottom: 34px solid #B04A2C;
}

/* 右指三角：只留 border-left */
.tri-rt {
  border-top:    20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left:   32px solid #3F6E6A;
}

下拉菜单的小箭头、气泡框的尖角，都是这个原理。现代写法也可用 clip-path，但 border 三角兼容性最好。

7.6overflow：装不下怎么办？visible / hidden / auto

默认 visible 溢出显示；hidden 直接裁掉；auto 装不下才出滚动条。

overflow: visible → 我溢出了边框

overflow: hidden → 多余的被裁

overflow: auto → 试试拖动横向滚动

.of-vis { overflow: visible; }  /* 默认：不管 */
.of-hid { overflow: hidden; }   /* 裁掉超出部分 */
.of-scr { overflow: auto; }     /* 需要时出滚动条 */

/* 只锁一个方向：
   overflow-x: auto;  横向滚
   overflow-y: hidden; 纵向裁 */

/* overflow:hidden 的隐藏用法：
   触发 BFC、配合圆角裁图片 */

「圆角容器 + 直角图片」必须加 overflow:hidden，否则图片四角戳出圆角外——课上限时找茬练习的好素材。

7.7filter：一行代码的图像效果

模糊、去色、提亮……CSS 滤镜直接作用于元素渲染结果，不用改图。

原图

blur(2px)

grayscale(1)

brightness(1.35)

.f-blur { filter: blur(2px); }        /* 毛玻璃感 */
.f-gray { filter: grayscale(1); }     /* 全灰：旧图占位 */
.f-br   { filter: brightness(1.35); } /* 提亮：hover 反馈 */

/* 常见搭配：hover 时「彩色→灰色」
img { filter: grayscale(1); }
img:hover { filter: none; }  悬停恢复彩色 */

多个滤镜可连写：filter: blur(2px) brightness(1.2)。注意 blur 会波及边缘，卡片内文字模糊要只给背景层。

背景 · 边框 · 效果