在HTML5中，我们可以使用CSS3的resize属性来实现边框的拉缩，但是需要注意的是，这个属性只对<textarea>和<input>元素有效，下面我将详细介绍如何使用HTML5和CSS3实现边框的拉缩。
（图片来源网络，侵删）
我们需要创建一个HTML文件，然后在文件中添加一个<textarea>或<input>元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>边框拉缩示例</title> <style> /* 在这里添加CSS样式 */ </style> </head> <body> <textarea id="resizable"></textarea> </body> </html>接下来，我们在<style>标签内添加CSS样式，为了实现边框的拉缩，我们需要设置overflow属性为auto，并使用伪元素::webkitscrollbar来自定义滚动条，我们还需要设置resize属性为both，以便用户可以同时调整宽度和高度，我们可以通过修改伪元素的样式来实现边框的拉缩效果。
#resizable { display: block; width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; overflow: auto; resize: both; } #resizable::webkitscrollbar { width: 12px; /* 滚动条宽度 */ } #resizable::webkitscrollbarthumb { backgroundcolor: #999; /* 滚动条颜色 */ borderradius: 6px; /* 圆角 */ } #resizable::webkitscrollbartrack { backgroundcolor: #f1f1f1; /* 滚动条轨道颜色 */ }现在，当我们将鼠标悬停在文本框的边缘时，应该可以看到可以拖动的边框了，通过拖动这个边框，我们可以调整文本框的大小，如果需要调整滚动条的位置，可以使用JavaScript来实现，以下是一个简单的示例：
function adjustScrollbarPosition() { const resizable = document.getElementById(resizable); const scrollbarWidth = resizable.offsetWidth resizable.clientWidth; // 计算滚动条宽度 const scrollbarLeft = resizable.getBoundingClientRect().left + scrollbarWidth; // 计算滚动条左边界位置 const scrollbar = resizable.querySelector(::webkitscrollbar); // 获取滚动条元素 scrollbar.style.left = scrollbarLeft + px; // 设置滚动条位置 } document.addEventListener(DOMContentLoaded, () => { adjustScrollbarPosition(); // 页面加载完成后调整滚动条位置 });将上述JavaScript代码添加到HTML文件的<script>标签内，即可实现滚动条位置的调整，这样，我们就实现了一个简单的边框拉缩功能，当然，这只是一个基本的示例，实际应用中可能需要根据需求进行更多的定制和优化。
