02圆角边框与阴影

方正硬朗 → 圆润柔和，一个 border-radius 就够； 平面贴纸 → 立体悬浮，靠 box-shadow。 这是网页「质感」的第一课，也是 CSS3 里性价比最高的两个属性。

约 30 分钟 6 个动手实验 网页质感之基

一、border-radius：从方到圆

一个值就是「每个角的半径」：border-radius: 16px 表示四个角都以 16px 为半径倒圆。 想精细控制，可以按「左上 → 右上 → 右下 → 左下」顺时针给四个角不同的值， 也可以用单角属性点名只改一个角。

border-radius 各写法展开：一到四值顺时针 + 单角 + 特殊值
写法含义
border-radius: 12px四角统一 12px
border-radius: 12px 24px两值对角一组：左上右下 12px，右上左下 24px
border-radius: 12px 24px 8px左上 / 右上左下 / 右下
border-radius: 12px 24px 8px 4px左上 → 右上 → 右下 → 左下（顺时针一圈）
border-top-left-radius: 20px只改左上角（另有 top-right / bottom-right / bottom-left）
border-radius: 50%正方形变正圆；矩形变椭圆
border-radius: 999px超大值 = 胶囊（超出的部分会被自动等比压缩）

五种形态摆一起，把 .b 的 16px 改成 40px，看圆角变化：

从方到圆五种形态：把 .b 的 16px 改成 40px，看统一圆角更圆
头像裁圆不用改图片文件：img { border-radius: 50%; } 直接生效， 前提是图片本身是正方形（可配合 object-fit: cover 补救）。

二、斜杠语法：椭圆角

圆角其实有两个半径：水平半径和垂直半径。 平时写一个值时两者相等（正圆角）；用斜杠 / 分开写，就能让它们不一样， 得到椭圆角：水平长就「扁圆」，垂直长就「竖圆」。

同一个盒子，四种「水平半径 / 垂直半径」组合，把每个盒子的 x / y 值调换看看差异：

四种「水平 / 垂直」半径组合：把 .c 的 20px / 40px 与 .b 的 40px / 20px 互换，看扁圆角和竖圆角翻转
日常开发 95% 的场景一个值就够；斜杠语法更多出现在 「鸡蛋形」「叶子形」这类拟物设计里。认识它，见到不慌即可。

三、box-shadow：五个参数逐个看

盒阴影的完整语法是 x 偏移 y 偏移 模糊半径 扩散半径 颜色—— 只有前两个必填，其余可选。一个参数一个效果，逐个叠加着看最直观：

五个盒子各用一种参数组合——把 .d 的 8px 扩散改成 -8px，描边环变内收
方向口诀：x 正右负左，y 正下负上。 想让光从左上打来（视觉习惯），影子就该往右下： box-shadow: 4px 4px 12px rgba(0,0,0,.2)。

四、inset 内阴影与多重阴影

在最前面加一个 inset 关键字，阴影就从「外面的影子」变成 「里面的影子」——凹陷感扑面而来，输入框、凹陷按钮、井底都靠它。 另外，阴影可以逗号分隔写多层，先写的在上层， 「描边 + 投影」的组合拳是卡片设计的常客。

左边 inset 凹陷井，右边三层阴影拼出的「双描边浮卡」——把左边 inset 删掉就是外投影
阴影颜色别用不透明纯黑——rgba + 低透明度 才自然。 业界经典的两段式悬浮：0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12) （近处一实一虚，层次立刻出来）。

五、实战：悬浮卡片与霓虹按钮

圆角 + 阴影 + 一个 :hover，就能做出「能摸」的交互质感。 这里的 transition 让变化平滑发生——后面第 6 课的主角，先混个脸熟。

鼠标悬停卡片和按钮——把 translateY(-6px) 改大，看浮起更高；改霓虹按钮发光层模糊，光晕更散
「上移 + 阴影加深」是物理直觉：物体离桌面越远， 影子越大越淡、本体越亮。照着物理规律做动效，用户永远觉得「顺」。

六、border-image：把边框当画布

普通边框只能是一条纯色线；border-image 允许用一张图（或一个渐变） 来画边框。它把素材切成九宫格：四个角照搬、四条边拉伸或平铺、 中间丢弃——所以特别适合「四角有花纹」的相框式边框。

border-image 五个子属性：切图、控宽、平铺
子属性作用常用值
border-image-source素材来源url(图) / 渐变函数
border-image-slice从四周往里切多少（决定九宫格的格线）无单位数字 / %
border-image-width边框图的绘制宽度px / 数字倍数
border-image-outset边框图向外扩张多少了解即可
border-image-repeat四条边的填充方式stretch（默认）/ round / repeat
渐变边框 + 斜纹相框，零请求——把左框的渐变颜色换成 #6E8B6E, #4E7A52 看配色变化
记住这个组合：border: Npx solid transparent + border-image: 渐变 1 = 渐变描边。 它和 border-radius 互斥（圆角会被边框图吃掉），二选一。

七、本章小结

box-shadow 参数速查（考试高频，实战更高频）：

box-shadow 六参数速查
参数必填作用常用值
x 偏移是水平方向，正右负左0 ~ 12px
y 偏移是垂直方向，正下负上2 ~ 16px
模糊半径否边缘虚化，越大越「飘」4 ~ 30px
扩散半径否整体扩大 / 收缩，负值收小-6 ~ 8px
颜色建议务必 rgba 带透明度rgba(0,0,0,.15)
inset否写在最前面，变内阴影inset 0 2px 6px …
  • border-radius：一个值四角统一；顺时针可给四角不同值；50% 变圆、超大值变胶囊；斜杠分水平 / 垂直半径得椭圆角
  • box-shadow：x y 模糊 扩散 颜色，只有偏移必填；颜色用 rgba 才自然
  • inset 做凹陷感；多重阴影逗号分隔，描边 + 投影组合拳
  • 悬浮效果公式：hover 上移 + 阴影加深（配合 transition 平滑）
  • border-image 用图或渐变当边框素材，九宫格切分；渐变描边是它的招牌用法
动手练习：复制第五节悬浮卡片的代码到实验台，做一套「三态按钮」—— 默认浅阴影 0 2px 6px、hover 上移加深、按下（:active）反而下压 translateY(2px) + 阴影缩小。做完你就理解了「用阴影表达物理状态」。