组件效果预览
1. 容器布局：定位系统与盒模型
.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. 按钮样式：个性化外观与定位
.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.伪元素装饰：用边框绘制三角形
.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.源码
<!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>