边框与圆角
边框（border）和圆角（border-radius）是塑造卡片、按钮等组件外观的基础工具。
边框
border 简写属性：border: 宽度 样式 颜色。样式有 solid（实线）、dashed（虚线）、dotted（点线）等。可以单独设置某一边：border-bottom。
圆角
border-radius 设置圆角半径。一个值四角相同；border-radius: 50% 可以将正方形变成圆形。圆角也可分开设置四个角：border-top-left-radius 等。
设计建议：按钮、卡片使用适度圆角（4-12px）更柔和；大圆角（胶囊按钮）适合主 CTA。
代码示例
<style>
.card {
width: 240px;
padding: 20px;
background: #fff;
border: 1px solid #e5e7eb; /* 浅色边框 */
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.avatar {
width: 80px;
height: 80px;
background: #3b5bdb;
border-radius: 50%; /* 圆形 */
color: #fff;
line-height: 80px;
text-align: center;
font-size: 32px;
}
.btn {
display: inline-block;
padding: 8px 24px;
background: #3b5bdb;
color: #fff;
border: none;
border-radius: 999px; /* 胶囊按钮 */
cursor: pointer;
}
</style>
<div class="card">
<div class="avatar">王</div>
<p>小王同学</p>
<button class="btn">关注</button>
</div>📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
color: #333; | 文字颜色 |
background: #fff; | 背景色 / 背景图 |
font-size: 16px; | 字号 |
font-family: Arial; | 字体 |
font-weight: bold; | 字重（加粗） |
margin: 10px; | 外边距（上右下左） |
padding: 10px; | 内边距 |
border: 1px solid #ccc; | 边框：粗细 样式 颜色 |
border-radius: 8px; | 圆角 |
width: 100%; | 宽度 |
height: 200px; | 高度 |
display: flex; | 弹性布局（现代布局主力） |
display: none; | 隐藏元素 |
position: relative / absolute / fixed; | 定位方式 |
top / left / right / bottom | 定位偏移 |
text-align: center; | 文字水平对齐 |
line-height: 1.6; | 行高 |
overflow: hidden; | 内容溢出处理 |
box-shadow: 0 2px 8px rgba(0,0,0,.1); | 阴影 |
transition: all .3s; | 过渡动画 |
cursor: pointer; | 鼠标手型 |
z-index: 10; | 层叠顺序 |
max-width: 1200px; margin: 0 auto; | 容器居中（经典写法） |
@media (max-width: 768px) {} | 响应式断点 |
:hover | 鼠标悬停状态 |