CSS 学习01 定位、阴影与伪元素

组件效果预览

1. 容器布局：定位系统与盒模型

javascript 复制代码

.container {
  position: relative; /* 为子元素绝对定位提供参考坐标系 */
  height: 140px; width: 240px; /* 固定容器尺寸 */
  padding: 20px; /* 内边距创造内容空间 */
  background-color: #fff; /* 白色背景 */
  border-radius: 4px; /* 整体圆角 */
  color: #333; /* 文字颜色 */
  box-shadow: 0px 0px 60px 5px rgb(0 0 0 / 40%); /* 关键！大尺寸模糊阴影营造悬浮感 */
}

定位系统：position: relative 让容器成为绝对定位子元素的参考点
阴影技巧：box-shadow 四个值分别为（水平偏移，垂直偏移，模糊半径，扩散半径），这里使用大模糊半径（60px）+ 扩散半径（5px）实现柔和外阴影

2. 按钮样式：个性化外观与定位

javascript 复制代码

.btn {
  position: absolute; /* 脱离文档流，相对于容器定位 */
  border-radius: 30px; /* 圆角按钮 */
  border-bottom-right-radius: 0; /* 取消右下角圆角 */
  border-top-right-radius: 0; /* 取消右上角圆角 */
  background-color: #0f0092; /* 深邃蓝色背景 */
  color: #fff; /* 白色文字 */
  padding: 12px 25px; /* 内边距控制按钮大小 */
  display: inline-block; /* 保持行内元素特性但可设置宽高 */
  font-size: 12px; /* 小字体 */
  font-weight: bold; /* 粗体 */
  letter-spacing: 5px; /* 字母间距营造科技感 */
  right: -10px; bottom: -20px; /* 关键！按钮悬挂在容器外的定位值 */
  cursor: pointer; /* 鼠标悬停变手型 */
  transition: all 0.25s ease; /* 全属性过渡，时长0.25秒 */
  box-shadow: -5px 6px 20px 0px rgb(26 26 26 / 40%); /* 左侧斜向阴影营造立体感 */
}

非对称圆角：通过单独设置 border-radius 的四个角，实现左半圆右直角的独特造型
定位魔法：right: -10px 让按钮右边缘超出容器 10px，bottom: -20px 向下偏移 20px，形成悬挂效果
阴影方向：box-shadow 负值水平偏移（-5px）实现左侧阴影，模拟光源从右侧照射的立体效果
过渡效果：transition: all 让后续交互（如:hover）的所有样式变化平滑过渡

3.伪元素装饰：用边框绘制三角形

javascript 复制代码

.container::after {
  position: absolute; /* 相对于容器定位 */
  content: ''; /* 必加，伪元素生成实体 */
  right: -10px; bottom: 18px; /* 三角形位置调整 */
  width: 0; height: 0; /* 零宽高配合边框绘制图形 */
  border-left: 0px solid transparent; /* 左边框透明 */
  border-right: 10px solid transparent; /* 右边框透明 */
  border-bottom: 10px solid #1a044e; /* 底部边框为深色，形成三角形底边 */
}

三角形原理：利用边框交汇形成图形，当三边透明，一边有色时，会形成等腰三角形
定位微调：通过 bottom: 18px 让三角形位于按钮下方，与按钮阴影颜色（#1a044e）呼应，增强层次感
伪元素优势：无需额外 HTML 标签，纯 CSS 实现装饰元素，保持代码简洁

4.总结

通过这个案例，我们不仅实现了一个美观的按钮组件，更系统练习了 CSS 定位、盒模型、伪元素、过渡效果等核心技能。建议读者亲手敲代码并不断修改参数，观察样式变化规律，这是掌握 CSS 视觉设计的关键方法

5.源码

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        position: relative;
        height: 140px;
        width: 240px;
        padding: 20px;
        background-color: #fff;
        border-radius: 4px;
        color: #333;
        box-shadow: 0px 0px 60px 5px rgb(0 0 0 / 40%);
      }
      .btn {
        position: absolute;
        border-radius: 30px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        background-color: #0f0092;
        color: #fff;
        padding: 12px 25px;
        display: inline-block;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 5px;
        right: -10px;
        bottom: -20px;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: -5px 6px 20px 0px rgb(26 26 26 / 40%);
      }
      .container::after {
        position: absolute;
        content: '';
        right: -10px;
        bottom: 18px;
        width: 0;
        height: 0;
        border-left: 0px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #1a044e;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="btn">SUBMIT</div>
    </div>
  </body>
</html>