border: 5px solid red; (宽 + 样式 + 颜色)
👇 把鼠标放上去 (Hover) 看看变化！
/* 磨去一点棱角 */ border-radius: 10px; /* 完全变成圆石 (如果是正方形) */ border-radius: 50%;
占地盘。
加了边框，盒子会变大 (除非用 border-box)。
不占地盘。
悬浮在盒子之上，常用于强调 (Focus)。
任务： 修补羊圈的篱笆。
目标：给 .pen 一个 5px 宽的 solid (实线) black (黑色) 边框，并加上 10px 的圆角。
大卫王需要一枚印章来签署法令。我们用边框和轮廓来制作它！
把一个正方形完全变成圆形，只需要 50% 的圆角。
.royal-seal {
width: 100px;
height: 100px;
background-color: #fca5a5; /* 浅红底色 */
border-radius: 50%; /* 变成圆形 */
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #7f1d1d;
}
使用 double 边框，瞬间增加尊贵感。
.royal-seal {
border: 6px double #b91c1c; /* 双线红边 */
}
使用 outline 和 outline-offset 增加一层悬浮的圆环。
.royal-seal {
outline: 2px dashed #b91c1c; /* 虚线外圈 */
outline-offset: 5px; /* 向外推开 5px */
}