• 首页
  • 社区
  • 导读
  • 圈子
  • 家园
  • 榜单
  • 帮助
    • 立即注册

    用 CSS 打造个性倒边框半径卡片效果

    15 5
    昨天 11:02 发表在 建站资源| 查看全部 阅读模式

    马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

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

    ×

    用 CSS 打造个性倒边框半径卡片效果

    用 CSS 打造个性倒边框半径卡片效果
    这个卡片的核心是用 CSS 伪元素搭配阴影模拟出 “倒圆角” 的视觉效果，整体结构不复杂，下面把完整的代码和详细注释贴出来，新手也能轻松看懂、直接套用～

    1. HTML 部分（index.html）
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <!-- 适配移动端视图 -->
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>CSS 倒边框半径卡</title>
    8.     <!-- 引入样式文件 -->
    9.     <link rel="stylesheet" href="style.css" />
    10.   </head>
    11.   <body>
    12.     <!-- 卡片容器 -->
    13.     <div class="card">
    14.       <!-- 顶部卡片区域（放视频背景） -->
    15.       <div class="box">
    16.         <div class="imgBx">
    17.           <!-- 自动循环播放且静音的视频背景 -->
    18.           <video src="cover.mp4" type="video/mp4" autoplay loop muted></video>
    19.         </div>
    20.       </div>
    21.       <!-- 底部卡片区域（放个人信息） -->
    22.       <div class="box">
    23.         <div class="content">
    24.           <!-- 姓名和身份 -->
    25.           <h2>Lila Simmons<br/><span>Professional Artist</span></h2>
    26.           <!-- 数据统计 -->
    27.           <ul>
    28.             <li>Posts<span>62</span></li>
    29.             <li>Followers<span>120</span></li>
    30.             <li>Following<span>47</span></li>
    31.           </ul>
    32.           <!-- 关注按钮 -->
    33.           <button>Follower</button>
    34.         </div>
    35.       </div>
    36.       <!-- 左侧圆形头像区域 -->
    37.       <div class="circle">
    38.         <div class="imgBx">
    39.           <img src="user.png" alt="用户头像">
    40.         </div>
    41.       </div>
    42.     </div>
    43.   </body>
    44. </html>
    复制代码

    2. CSS 部分（style.css）
    1. /* 全局样式重置 */
    2. * {
    3.   margin: 0;
    4.   padding: 0;
    5.   /* 盒模型：宽高包含边框和内边距 */
    6.   box-sizing: border-box;
    7. }
    8. /* 定义全局颜色变量，方便统一修改 */
    9. :root {
    10.   --clr: #083d41
    11. }
    12. /* 页面整体样式：居中展示，背景色用变量 */
    13. body{
    14.   display: flex;
    15.   justify-content: center;
    16.   align-items: center;
    17.   min-height: 100vh;
    18.   background: var(--clr);
    19. }
    20. /* 卡片容器：相对定位，设置宽高，纵向排列子元素 */
    21. .card {
    22.   position: relative;
    23.   width: 320px;
    24.   height: 430px;
    25.   display: flex;
    26.   flex-direction: column;
    27.   justify-content: space-between;
    28. }
    29. /* 卡片内的两个box通用样式 */
    30. .card .box {
    31.   position: relative;
    32.   width: 110%;
    33.   height: 200px;
    34.   border-radius: 15px;
    35. }
    36. /* 第一个box（视频区域）：伪元素做左侧倒圆角 */
    37. .card .box:nth-child(1) {
    38.   background: #f00; /* 视频区域背景（被视频覆盖） */
    39. }
    40. .card .box:nth-child(1)::before {
    41.   content: "";
    42.   position: absolute;
    43.   top: 106px;
    44.   left: -1px;
    45.   width: 20px;
    46.   height: 20px;
    47.   background: transparent;
    48.   z-index: 10;
    49.   border-bottom-left-radius: 20px;
    50.   /* 利用阴影模拟倒圆角效果，颜色和页面背景一致 */
    51.   box-shadow: -6px 6px var(--clr);
    52. }
    53. /* 第一个box：伪元素做底部倒圆角 */
    54. .card .box:nth-child(1)::after {
    55.   content: "";
    56.   position: absolute;
    57.   bottom: -1px;
    58.   left: 105px;
    59.   width: 20px;
    60.   height: 20px;
    61.   background: transparent;
    62.   z-index: 10;
    63.   border-bottom-left-radius: 20px;
    64.   box-shadow: -6px 6px var(--clr);
    65. }
    66. /* 第二个box（信息区域）：调整宽高和背景色 */
    67. .card .box:nth-child(2) {
    68.   background: #fff;
    69.   height: 220px;
    70.   width: 100%;
    71. }
    72. /* 第二个box：伪元素做左侧倒圆角 */
    73. .card .box:nth-child(2)::before {
    74.   content: "";
    75.   position: absolute;
    76.   bottom: 106px;
    77.   left: -1px;
    78.   width: 20px;
    79.   height: 20px;
    80.   background: transparent;
    81.   z-index: 10;
    82.   border-top-left-radius: 20px;
    83.   box-shadow: -6px -6px var(--clr);
    84. }
    85. /* 第二个box：伪元素做顶部倒圆角 */
    86. .card .box:nth-child(2)::after {
    87.   content: "";
    88.   position: absolute;
    89.   top: -1px;
    90.   left: 109px;
    91.   width: 20px;
    92.   height: 20px;
    93.   background: transparent;
    94.   z-index: 10;
    95.   border-top-left-radius: 20px;
    96.   box-shadow: -6px -6px var(--clr);
    97. }
    98. /* 左侧圆形头像容器：绝对定位，居中显示 */
    99. .card .circle {
    100.   position: absolute;
    101.   top: 50%;
    102.   left: -70px;
    103.   transform: translateY(-50%);
    104.   width: 180px;
    105.   height: 180px;
    106.   border-radius: 50%;
    107.   /* 边框颜色和页面背景一致，营造镂空感 */
    108.   border: 10px solid var(--clr);
    109. }
    110. /* 头像和视频容器通用样式：溢出隐藏，适配圆角 */
    111. .card .circle .imgBx,
    112. .card .box .imgBx {
    113.   position: absolute;
    114.   inset: 0;
    115.   overflow: hidden;
    116.   border-radius: 50%;
    117. }
    118. /* 视频容器单独调整圆角，适配卡片 */
    119. .card .box .imgBx {
    120.   border-radius: 15px;
    121. }
    122. /* 头像和视频内容：铺满容器，保持比例 */
    123. .card .circle .imgBx img,
    124. .card .box .imgBx video {
    125.   position: absolute;
    126.   width: 100%;
    127.   height: 100%;
    128.   object-fit: cover;
    129. }
    130. /* 信息区域布局：居中排列，内边距调整 */
    131. .card .box .content{
    132.   position: absolute;
    133.   inset: 0;
    134.   padding: 30px 10px 20px;
    135.   display: flex;
    136.   align-items: center;
    137.   flex-direction: column;
    138.   gap: 20px;
    139. }
    140. /* 姓名样式：排版调整，颜色区分 */
    141. .card .box .content h2{
    142.   width: 100%;
    143.   padding-left: 120px;
    144.   text-transform: uppercase;
    145.   font-size: 1.15em;
    146.   letter-spacing: 0.1em;
    147.   font-weight: 600;
    148.   line-height: 1.1em;
    149.   color: #333;
    150. }
    151. /* 身份文字：字号和颜色调整 */
    152. .card .box .content h2 span {
    153.   font-size: 0.75em;
    154.   font-weight: 400;
    155.   letter-spacing: 0.05em;
    156.   color: #e91e63;
    157.   text-transform: initial;
    158. }
    159. /* 数据统计列表：网格布局，均分宽度 */
    160. .card .box .content ul {
    161.   position: relative;
    162.   top: 15px;
    163.   display: grid;
    164.   grid-template-columns: repeat(3, 1fr);
    165.   width: 100%;
    166.   padding: 0 10px;
    167.   justify-content: space-evenly;
    168. }
    169. /* 列表项样式：纵向排列，文字颜色区分 */
    170. .card .box .content ul li {
    171.   list-style: none;
    172.   display: flex;
    173.   flex-direction: column;
    174.   text-align: center;
    175.   padding: 0 10px;
    176.   font-size: 0.85em;
    177.   font-weight: 500;
    178.   color: #999;
    179. }
    180. /* 列表项分隔线：除最后一个外，右侧加边框 */
    181. .card .box .content ul li:not(:last-child) {
    182.   border-right: 1px solid #ccc;
    183. }
    184. /* 数据数字：字号放大，颜色加深 */
    185. .card .box .content ul li span {
    186.   font-size: 1.65em;
    187.   color: #333;
    188. }
    189. /* 关注按钮样式：圆角、阴影、边框营造层次感 */
    190. .card .box .content button {
    191.   position: relative;
    192.   top: 25px;
    193.   padding: 8px 30px;
    194.   border: none;
    195.   outline: none;
    196.   background: #03a9f4;
    197.   border-radius: 30px;
    198.   color: #fff;
    199.   font-size: 1em;
    200.   letter-spacing: .2em;
    201.   text-transform: uppercase;
    202.   font-weight: 500;
    203.   cursor: pointer;
    204.   border: 5px solid var(--clr);
    205.   box-shadow: 0 0 0 10px #fff;
    206.   transition: 0.5s;
    207. }
    208. /* 按钮hover效果：文字间距变大，背景色改变 */
    209. .card .box .content button:hover{
    210.   letter-spacing: 0.5em;
    211.   background: #ff3d7f;
    212. }
    213. /* 按钮左侧倒圆角伪元素 */
    214. .card .box .content button::before{
    215.   content: "";
    216.   position: absolute;
    217.   top: 24px;
    218.   left: -29px;
    219.   width: 20px;
    220.   height: 20px;
    221.   background: transparent;
    222.   border-top-right-radius: 20px;
    223.   box-shadow: 5px -7px #fff;
    224. }
    225. /* 按钮右侧倒圆角伪元素 */
    226. .card .box .content button::after{
    227.   content: "";
    228.   position: absolute;
    229.   top: 24px;
    230.   right: -29px;
    231.   width: 20px;
    232.   height: 20px;
    233.   background: transparent;
    234.   border-top-left-radius: 20px;
    235.   box-shadow: -5px -7px #fff;
    236. }
    复制代码

    替换里面的cover.mp4和user.png为自己的素材就能直接用，核心的倒圆角效果都在伪元素的box-shadow那里，调整数值还能改倒圆角的大小，感兴趣的可以自己试试。
    20px, position, width
    生命在于折腾，牛马点缀生活。
    回复 转播

    举报

    全部评论5

    九三郎vip vip-forever
    沙发 昨天 13:01 | 查看全部
    给整合到DZ里面吧。
    违规内容举报
    回复

    举报

    七夏楼主vip vip-forever
    板凳 昨天 14:30 | 查看全部
    九三郎 发表于 2026-1-29 13:01
    给整合到DZ里面吧。

    整合到哪个位置啊，不知道干嘛用
    生命在于折腾，牛马点缀生活。
    回复

    举报

    九三郎vip vip-forever
    地板 昨天 15:11 | 查看全部


    image.webp


    这里。
    违规内容举报
    回复

    举报

    七夏楼主vip vip-forever
    5# 昨天 15:13 | 查看全部
    九三郎 发表于 2026-1-29 15:11
    这里。

    其实不咋好看，后期我看看有没有合适的位置，这两天没时间折腾了
    生命在于折腾，牛马点缀生活。
    回复

    举报

    九三郎vip vip-forever
    6# 昨天 15:19 | 查看全部
    七夏 发表于 2026-1-29 15:13
    其实不咋好看，后期我看看有没有合适的位置，这两天没时间折腾了

    抓紧去把电脑拿回来吧。
    违规内容举报
    回复

    举报

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

    本版积分规则

    上一主题     下一主题
    最新热评 加载中...
    牛马论坛（niumabbs.com），一个专注于分享日常新鲜事、职场工作点滴、摸鱼乐趣与各类生活感悟的交流平台。

    快捷访问

    我的帖子 我的收藏 我的好友 我的关注

    附加功能

    任务大厅 道具商店 勋章中心 随便看看

    关于我们

    举报 小黑屋 手机版 站点统计

      关注我们

    • 加入Q群
    • 微信客服
    • QQ客服
    Copyright © 2026 NIUMABBS 版权所有 All Rights Reserved. 劰载中...
    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表