用 CSS 打造个性倒边框半径卡片效果
这个卡片的核心是用 CSS 伪元素搭配阴影模拟出 “倒圆角” 的视觉效果，整体结构不复杂，下面把完整的代码和详细注释贴出来，新手也能轻松看懂、直接套用～
1. HTML 部分（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- 适配移动端视图 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 倒边框半径卡</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 卡片容器 -->
<div class="card">
<!-- 顶部卡片区域（放视频背景） -->
<div class="box">
<div class="imgBx">
<!-- 自动循环播放且静音的视频背景 -->
<video src="cover.mp4" type="video/mp4" autoplay loop muted></video>
</div>
</div>
<!-- 底部卡片区域（放个人信息） -->
<div class="box">
<div class="content">
<!-- 姓名和身份 -->
<h2>Lila Simmons<br/><span>Professional Artist</span></h2>
<!-- 数据统计 -->
<ul>
<li>Posts<span>62</span></li>
<li>Followers<span>120</span></li>
<li>Following<span>47</span></li>
</ul>
<!-- 关注按钮 -->
<button>Follower</button>
</div>
</div>
<!-- 左侧圆形头像区域 -->
<div class="circle">
<div class="imgBx">
<img src="user.png" alt="用户头像">
</div>
</div>
</div>
</body>
</html>
2. CSS 部分（style.css）
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
/* 盒模型：宽高包含边框和内边距 */
box-sizing: border-box;
}
/* 定义全局颜色变量，方便统一修改 */
:root {
--clr: #083d41
}
/* 页面整体样式：居中展示，背景色用变量 */
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--clr);
}
/* 卡片容器：相对定位，设置宽高，纵向排列子元素 */
.card {
position: relative;
width: 320px;
height: 430px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 卡片内的两个box通用样式 */
.card .box {
position: relative;
width: 110%;
height: 200px;
border-radius: 15px;
}
/* 第一个box（视频区域）：伪元素做左侧倒圆角 */
.card .box:nth-child(1) {
background: #f00; /* 视频区域背景（被视频覆盖） */
}
.card .box:nth-child(1)::before {
content: "";
position: absolute;
top: 106px;
left: -1px;
width: 20px;
height: 20px;
background: transparent;
z-index: 10;
border-bottom-left-radius: 20px;
/* 利用阴影模拟倒圆角效果，颜色和页面背景一致 */
box-shadow: -6px 6px var(--clr);
}
/* 第一个box：伪元素做底部倒圆角 */
.card .box:nth-child(1)::after {
content: "";
position: absolute;
bottom: -1px;
left: 105px;
width: 20px;
height: 20px;
background: transparent;
z-index: 10;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px var(--clr);
}
/* 第二个box（信息区域）：调整宽高和背景色 */
.card .box:nth-child(2) {
background: #fff;
height: 220px;
width: 100%;
}
/* 第二个box：伪元素做左侧倒圆角 */
.card .box:nth-child(2)::before {
content: "";
position: absolute;
bottom: 106px;
left: -1px;
width: 20px;
height: 20px;
background: transparent;
z-index: 10;
border-top-left-radius: 20px;
box-shadow: -6px -6px var(--clr);
}
/* 第二个box：伪元素做顶部倒圆角 */
.card .box:nth-child(2)::after {
content: "";
position: absolute;
top: -1px;
left: 109px;
width: 20px;
height: 20px;
background: transparent;
z-index: 10;
border-top-left-radius: 20px;
box-shadow: -6px -6px var(--clr);
}
/* 左侧圆形头像容器：绝对定位，居中显示 */
.card .circle {
position: absolute;
top: 50%;
left: -70px;
transform: translateY(-50%);
width: 180px;
height: 180px;
border-radius: 50%;
/* 边框颜色和页面背景一致，营造镂空感 */
border: 10px solid var(--clr);
}
/* 头像和视频容器通用样式：溢出隐藏，适配圆角 */
.card .circle .imgBx,
.card .box .imgBx {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 50%;
}
/* 视频容器单独调整圆角，适配卡片 */
.card .box .imgBx {
border-radius: 15px;
}
/* 头像和视频内容：铺满容器，保持比例 */
.card .circle .imgBx img,
.card .box .imgBx video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 信息区域布局：居中排列，内边距调整 */
.card .box .content{
position: absolute;
inset: 0;
padding: 30px 10px 20px;
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
}
/* 姓名样式：排版调整，颜色区分 */
.card .box .content h2{
width: 100%;
padding-left: 120px;
text-transform: uppercase;
font-size: 1.15em;
letter-spacing: 0.1em;
font-weight: 600;
line-height: 1.1em;
color: #333;
}
/* 身份文字：字号和颜色调整 */
.card .box .content h2 span {
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.05em;
color: #e91e63;
text-transform: initial;
}
/* 数据统计列表：网格布局，均分宽度 */
.card .box .content ul {
position: relative;
top: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
padding: 0 10px;
justify-content: space-evenly;
}
/* 列表项样式：纵向排列，文字颜色区分 */
.card .box .content ul li {
list-style: none;
display: flex;
flex-direction: column;
text-align: center;
padding: 0 10px;
font-size: 0.85em;
font-weight: 500;
color: #999;
}
/* 列表项分隔线：除最后一个外，右侧加边框 */
.card .box .content ul li:not(:last-child) {
border-right: 1px solid #ccc;
}
/* 数据数字：字号放大，颜色加深 */
.card .box .content ul li span {
font-size: 1.65em;
color: #333;
}
/* 关注按钮样式：圆角、阴影、边框营造层次感 */
.card .box .content button {
position: relative;
top: 25px;
padding: 8px 30px;
border: none;
outline: none;
background: #03a9f4;
border-radius: 30px;
color: #fff;
font-size: 1em;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
border: 5px solid var(--clr);
box-shadow: 0 0 0 10px #fff;
transition: 0.5s;
}
/* 按钮hover效果：文字间距变大，背景色改变 */
.card .box .content button:hover{
letter-spacing: 0.5em;
background: #ff3d7f;
}
/* 按钮左侧倒圆角伪元素 */
.card .box .content button::before{
content: "";
position: absolute;
top: 24px;
left: -29px;
width: 20px;
height: 20px;
background: transparent;
border-top-right-radius: 20px;
box-shadow: 5px -7px #fff;
}
/* 按钮右侧倒圆角伪元素 */
.card .box .content button::after{
content: "";
position: absolute;
top: 24px;
right: -29px;
width: 20px;
height: 20px;
background: transparent;
border-top-left-radius: 20px;
box-shadow: -5px -7px #fff;
}
替换里面的cover.mp4和user.png为自己的素材就能直接用，核心的倒圆角效果都在伪元素的box-shadow那里，调整数值还能改倒圆角的大小，感兴趣的可以自己试试。
给整合到DZ里面吧。 九三郎 发表于 2026-1-29 13:01
给整合到DZ里面吧。
整合到哪个位置啊，不知道干嘛用
这里。
九三郎 发表于 2026-1-29 15:11
这里。
其实不咋好看，后期我看看有没有合适的位置，这两天没时间折腾了 七夏 发表于 2026-1-29 15:13
其实不咋好看，后期我看看有没有合适的位置，这两天没时间折腾了
抓紧去把电脑拿回来吧。
页:
[1]