复习挑战
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 43 课，共 76 课。
挑战
简单在这个复习挑战中，你将使用 box-sizing、border-radius、overflow 和 box-shadow 来设置报纸文章的样式。这将检验你控制尺寸、处理溢出内容和提升视觉效果的能力。
你会得到一个 HTML 文档，其中有两个 <div> 区块，分别代表一篇报纸文章。你的任务是使用 box-sizing、border-radius、overflow 和 box-shadow 为这些文章设置样式，让它们看起来更美观。
按照以下步骤操作：
编写一条 CSS 规则，选中所有 <div> 区块。
- 将宽度设为 280px，高度设为 150px。
- 使用
box-sizing: border-box;，确保内边距和边框计入总尺寸。 - 在每篇文章内部添加 15px 的内边距，让内容周围留出空间。
- 设置一个实线边框，宽度为 3px，颜色为深灰色（
#444）。 - 应用 10px 的 border-radius，让边角变圆。
- 添加 box-shadow，值为 4px 4px 8px rgba(0, 0, 0, 0.2) ，营造轻微的悬浮效果。
- 设置
overflow: scroll;，让用户可以滚动查看溢出的内容。
亲手试试
<html>
<head>
<title>Newspaper Layout Challenge</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<div class="headline">
<h3>Biggest Tech Breakthrough of 2025!</h3>
<p>Scientists have unveiled a revolutionary AI model that can predict climate changes with 99% accuracy.
This groundbreaking innovation is expected to transform how governments and organizations respond to global
warming, extreme weather events, and natural disasters. Experts believe that integrating AI-driven forecasting
with existing climate policies will significantly reduce environmental damage over the next decade.</p>
</div>
<div class="article">
<h3>Opinion: The Future of Web Design</h3>
<p>As CSS evolves, developers are experimenting with more dynamic layouts and interactive user experiences...</p>
</div>
</body>
</html>使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器