html - 使用 html 部分标记时在 CSS-Grid 中提供相同的 css 属性

Question

我知道:

在带有 html 潜水的 CSS-Grid 中，为一行中的所有 div 赋予相同的 css 属性(例如 border-radius: 5px;)see this example

我知道:

在带有 html 部分的 CSS-Grid 中为每个 block 提供 css 属性，border-radius: 5px; see here

我的问题是:

我如何输入一次“border-radius: 5px”，这将影响 here 部分内的所有 block ？

注意，我需要使用 html 部分才能使用 CSS Grid

Answer 1

我的理解是，您希望在您的 CSS 文件中只有 1 行 (border-radius: 5px;)，并且 border-radius 会影响部分内的所有内容。

附件是包含解决方案的代码片段。 您基本上需要先定义每个网格区域。作为第二步，您可以用一条线定义边界半径。

#page {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 1fr 3fr 1fr;
  grid-template-columns: 1fr 6fr;
  grid-gap: 10px;
}

#page > header {grid-area: head; background-color: #8ca0ff;}
#page > nav {grid-area: nav; background-color: #ffa08c;}
#page > main {grid-area: main; background-color: #ffff64;}
#page > footer {grid-area: foot; background-color: #8cffa0;}


#page > header,
#page > nav,
#page > main,
#page > footer {
  border-radius: 5px;
}

<section id="page">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main area</main>
    <footer>Footer</footer>
  </section>