<header>

  <h1><code>calc()</code> : 渐变</h1>

</header>

​

<p>

确保内容不超出容器的最大宽度。

</p>

h1 {

  color: white;

  text-align: center;

  padding: 30px;

}

​

p {

  max-width: 25em;

  margin: 0 auto;

}

​

header {

   background: linear-gradient(90deg, #90278E, #FFDD15);

}

​

@media (min-width: 940px) {

  header {

    background: linear-gradient(

      90deg,

      #90278E calc(50% - 475px),

      white calc(50% - 475px),

      white calc(50% - 470px),

      #90278E calc(50% - 470px),

      #FFDD15 calc(50% + 470px),

      white calc(50% + 470px),

      white calc(50% + 475px),

      #FFDD15 calc(50% + 475px)

    );

  }

}