css宽高自适应圆角框背景

在网页设计中，使用圆角框背景可以使页面看起来更加美观。而在实现过程中，我们还需考虑到该背景的自适应调整，以适应不同的屏幕大小。下面将介绍关于CSS宽高自适应圆角框背景的实现方法。

.Box {
  background-color: #fff; // 背景颜色
  border-radius: 10px; // 圆角半径
  padding: 20px; // 内容边距

  /* 宽度自适应 */
  width: 100%;
  max-width: 800px; // 最大宽度，超出后自动缩小

  /* 高度自适应 */
  min-height: 100px; // 最小高度
  height: auto;
}

在上述代码中，我们通过设置盒子的宽度为100%，最大宽度为800px，来实现宽度的自适应。当屏幕宽度小于800px时，该盒子的大小会自动缩小以适应屏幕大小。同时，我们也设置了盒子的最小高度为100px，高度自适应。

需要注意的是，我们在设置圆角的时候，需要使用border-radius属性，它可以让我们设置边框的任意个角的圆角半径，从而实现常见的圆角矩形效果。

综上所述，实现宽高自适应的圆角框背景并不难，只需要合理运用CSS中的相关属性即可。