第 9 课 19 / 25 ｜ 编码：L09-28
综合判断 · 背景与尺寸

渐变背景与卡片尺寸

.notice {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 4px solid teal;
  background-color: ivory;
  background-image: linear-gradient(
    to right, transparent, lightblue);
}
.notice { background: lightyellow; }
<div class="notice">
  黄梅戏分享会
</div>
提问：
  1. 运行后还能看到渐变吗？
  2. 只修改底色、保留渐变，最后一行 CSS 应怎样改？
  3. 这样修改会改变边框盒宽度吗？
展开参考分析

渐变消失。background 是简写；这里只写背景色时，省略的 background-image 被重置为 none。

改为 .notice { background-color: lightyellow; }，就只改变底色。渐变左侧透明，能够透出新底色；右侧仍渐变到浅蓝色。

边框盒宽度仍为 300px。背景声明不改变本例的宽度、内边距或边框。外观与尺寸是两个不同问题。

展开代码运行演示 
<style>
  .notice {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 4px solid teal;
    background-color: ivory;
    background-image: linear-gradient(
      to right, transparent, lightblue);
  }
  .notice { background: lightyellow; }
</style>
<div class="notice">黄梅戏分享会</div>