滑动门 圆角背景宽度和高度自适应

滑动门是一种常见且实用的网页设计技巧，可以通过 CSS 实现灵活、美观的网页布局。本攻略将详细讲解如何实现一个滑动门，在该效果的基础上增加圆角背景，并实现宽度和高度自适应。

实现滑动门

第一步，我们需要准备两张图片，分别表示按钮的正常和悬停状态。我们可以在 HTML 中添加两个 元素作为按钮的容器，然后将两张图片作为作为 的背景图实现按钮的样式。

<span class="btn-normal">按钮</span>
<span class="btn-hover">按钮</span>

接着，我们使用 CSS 来实现按钮的样式：

.btn-normal {
  display: inline-block;
  width: 70px;
  height: 30px;
  background: url('normal.png') no-repeat center;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.btn-hover {
  display: inline-block;
  width: 70px;
  height: 30px;
  background: url('hover.png') no-repeat center;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

使用以上代码可以实现一个最基本的滑动门效果。

圆角背景的实现

现在，我们要将左侧和右侧的该区域给背景颜色加上圆角效果。此时，我们可以使用伪元素 ::before 和 ::after 来实现。在HTML中我们只需要再添加一个span元素即可。

<span class="btn-normal">按钮</span>
<span class="btn-hover">按钮</span>
<span class="btn-bg"></span>

接着，我们来实现它们的样式：

.btn-normal {
  display: inline-block;
  width: 70px;
  height: 30px;
  background: url('normal.png') no-repeat center;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.btn-hover {
  display: inline-block;
  width: 70px;
  height: 30px;
  background: url('hover.png') no-repeat center;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.btn-bg {
  display: inline-block;
  width: auto;
  height: 30px;
  background: #ccc;
  border-radius: 15px;
  position: relative;
}

.btn-bg::before,
.btn-bg::after {
  display: block;
  content: "";
  background: #ccc;
  position: absolute;
}

.btn-bg::before {
  top: 0;
  left: -15px;
  width: 15px;
  height: 30px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.btn-bg::after {
  top: 0;
  right: -15px;
  width: 15px;
  height: 30px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

以上代码展示了一个非常常规和基础的实现滑动门和带圆角背景样式。下面，我们来实现一个宽度和高度自适应功能的滑动门。

宽度和高度的自适应实现

实现宽度和高度自适应的滑动门，需要对代码做出一些调整，主要是在宽度自适应的实现上。要实现这种效果，我们将左侧滑动门的背景设为左侧圆角背景的左部，将右侧滑动门的背景设为右侧圆角背景的右部，中间部分使用水平拉伸的背景填充。

在 CSS 中，可以使用 CSS3 的 background-size 属性来实现图片的拉伸。

下面是一个示例代码：

<span class="btn-normal">按钮</span>
<span class="btn-hover">按钮</span>
<span class="btn-bg"></span>

.btn-normal {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background: url('btn-left.png') no-repeat left top #ccc;
  background-size: auto 100%;
  cursor: pointer;
}

.btn-hover {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background: url('btn-right.png') no-repeat right top #ccc;
  background-size: auto 100%;
  cursor: pointer;
}

.btn-bg {
  display: inline-block;
  height: 30px;
  background: #ccc;
  border-radius: 15px;
  position: relative;
}

.btn-bg::before,
.btn-bg::after {
  display: block;
  content: "";
  background: #ccc;
  position: absolute;
}

.btn-bg::before {
  top: 0;
  left: -15px;
  width: 15px;
  height: 30px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.btn-bg::after {
  top: 0;
  right: -15px;
  width: 15px;
  height: 30px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

在这个示例中，我们设置了左侧滑动门的背景为左侧圆角背景的左部，右侧滑动门的背景为右侧圆角背景的右部，中间部分则使用水平拉伸的背景填充。

以上是滑动门圆角背景宽度和高度自适应的一个示例代码，你可以通过 CSS 调整其中的样式来达到自己的预期效果。