怎么使用纯css实现左右拉伸拖动？

可以使用纯 CSS 实现左右拉伸拖动，但功能有限，真正的拖动行为通常需要 JavaScript。纯 CSS 方法主要依赖于 resize 属性，它可以使元素具有可调整大小的行为。 以下两种方法可以实现类似左右拉伸的效果：

1. 使用 <textarea> 或 <input type="text">:

这两种元素默认就带有 resize 属性，可以实现水平方向的拉伸。你可以设置 resize: horizontal 来限制只允许水平拉伸。

<textarea style="resize: horizontal;"></textarea>
<input type="text" style="resize: horizontal; width: 200px;">

优点：简单，无需额外的 CSS 或 JavaScript。
缺点：功能受限，只能用于文本输入框，样式自定义也比较受限，无法应用于其他类型的元素。

2. 使用 ::before 或 ::after 伪元素结合 resize 和 overflow:

这种方法可以应用于更多类型的元素，但需要一些技巧。核心思想是利用伪元素创建一个可调整大小的区域，然后通过绝对定位将其覆盖在目标元素上。

<div class="resizable-div">可拉伸的 div</div>

<style>
.resizable-div {
  position: relative;
  width: 200px;
  border: 1px solid black;
  padding: 10px;
}

.resizable-div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px; /* 拉伸手柄的宽度 */
  cursor: ew-resize; /* 设置鼠标样式 */
  z-index: 1; /* 确保手柄在内容上方 */
}

.resizable-div::before { /* 使用伪元素创建resize handle */
  resize: horizontal;
  overflow: hidden; /* 隐藏溢出内容 */
}

.resizable-div { /* 父元素也需要设置overflow */
    overflow: hidden;
}
</style>

优点：比第一种方法更灵活，可以应用于各种元素。
缺点：仍然功能受限，只是模拟了拉伸的效果，实际上改变的是伪元素的大小，父元素的宽度并不会真正改变。 而且，拉伸区域仅限于伪元素覆盖的区域（本例中是右侧 10px 宽的区域）。 此外，这种方法在某些浏览器上的兼容性可能存在问题。

总结:

纯 CSS 方法可以实现简单的左右拉伸效果，但真正的拖动和调整大小功能需要 JavaScript。 如果需要更灵活和功能完善的拖动拉伸效果，建议使用 JavaScript 库或自行编写 JavaScript 代码实现。 例如，可以使用 Draggable 库或自己监听 mousedown, mousemove, 和 mouseup 事件来实现。