实现原理
添加resize 属性即可实现：
none：初始值，表示没有拉伸效果，常用来重置<textarea>元素内置的拉伸行为，代码如下：
textarea { resize: none; }
both：既可以水平方向拉伸，也可以垂直方向拉伸。horizontal：仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。vertical：仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。block：后期新增的属性值，目前现代浏览器都提供支持。其表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这取决于writing-mode的值。
inline：和block属性值类似，只是inline表示内联元素的排列方向。默认是水平方向，如果使用writing-mode属性改成垂直排版，则inline的拉伸方向就会变成垂直方向。
resize 生效的条件
- 不支持内联元素。
- 如果是块级元素，需要
overflow属性的计算值不是visible。
即div需要同时设置overflow属性才能拉伸，例如：
div { overflow: hidden; resize: both; }
通过设置min-width、min-height、max-width和max-height可以限制拉伸尺寸。
完整代码范例
<template> <div style="padding: 30px"> <div class="box"></div> </div> </template> <style scoped> .box { overflow: hidden; resize: both; border: 1px solid red; width: 300px; height: 100px; min-width: 200px; max-width: 600px; } </style>
