CSS 学习01 定位、阴影与伪元素
组件效果预览https://i-blog.csdnimg.cn/direct/c09c38ad9fd44437a3b2081847a2813d.png#pic_center
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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]