front-end-example/02-css-layout/02-box-model-card

练习 2：盒模型卡片

目标

彻底理解 margin、padding、border 的区别。

你要练什么

• width
• padding
• border
• margin
• border-radius
• box-shadow

任务

请把一个课程卡片做出来，要求：

• 卡片和页面边缘有距离
• 卡片内部文字和边框有距离
• 卡片有边框和圆角
• 卡片有轻微阴影
• 按钮区域和正文之间有明显间隔

文件

• [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/starter.html)
• [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/starter.css)
• [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/answer.html)
• [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/answer.css)