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

伤心客  论坛元老 | 2025-4-13 02:46:24 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1711|帖子 1711|积分 5133

组件效果预览


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

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


  • 定位系统：position: relative 让容器成为绝对定位子元素的参考点
  • 阴影技巧：box-shadow 四个值分别为（程度偏移，垂直偏移，含糊半径，扩散半径），这里使用大含糊半径（60px）+ 扩散半径（5px）实现柔和外阴影
2. 按钮样式：个性化外观与定位

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


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

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


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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .container {
  9.         position: relative;
  10.         height: 140px;
  11.         width: 240px;
  12.         padding: 20px;
  13.         background-color: #fff;
  14.         border-radius: 4px;
  15.         color: #333;
  16.         box-shadow: 0px 0px 60px 5px rgb(0 0 0 / 40%);
  17.       }
  18.       .btn {
  19.         position: absolute;
  20.         border-radius: 30px;
  21.         border-bottom-right-radius: 0;
  22.         border-top-right-radius: 0;
  23.         background-color: #0f0092;
  24.         color: #fff;
  25.         padding: 12px 25px;
  26.         display: inline-block;
  27.         font-size: 12px;
  28.         font-weight: bold;
  29.         letter-spacing: 5px;
  30.         right: -10px;
  31.         bottom: -20px;
  32.         cursor: pointer;
  33.         transition: all 0.25s ease;
  34.         box-shadow: -5px 6px 20px 0px rgb(26 26 26 / 40%);
  35.       }
  36.       .container::after {
  37.         position: absolute;
  38.         content: '';
  39.         right: -10px;
  40.         bottom: 18px;
  41.         width: 0;
  42.         height: 0;
  43.         border-left: 0px solid transparent;
  44.         border-right: 10px solid transparent;
  45.         border-bottom: 10px solid #1a044e;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="btn">SUBMIT</div>
  52.     </div>
  53.   </body>
  54. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

伤心客

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表