这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战
resize
textarea元素右下角的记号并上下左右拉伸，就会发生textarea元素的高度和宽度发生变化了，这个拉伸效果起到的作用就是resize。resize属性参数值比较多，初始值而为none，表示没有拉伸效果。常用来重置textarea元素内置的拉伸行为。both作用是既可以水平方向拉伸，也可以垂直方向拉伸。vertical作用是仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。horizontal作用是仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。block作用是表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这主要取决于writing-mode值，这个属性值是后期新增的属性值。inline作用是默认是水平方向，如果使用使用writing-mode属性改成垂直排版，则inline的拉伸方向就会变成垂直方向，和block的属性值比较像。
textarea {
resize: none;
}
resize属性不支持内联元素，而且如果是块级元素，需要overflow属性的计算值不是visible。当我们设置下面代码不会出现拉伸效果。所以resize属性不是设置了就有效果而是有一些条件。resize属性的元素通过拉伸改变元素的尺寸是通过改变width属性值和height属性值来实现的效果。如果我们想要元素的拉伸的尺寸不是无线的，我们可以通过设置css的这些属性值来进行限制拉伸尺寸min-width、min-height、max-width和max-height。
.wrapper {
resize:both;
// 如果没有设置下面这行代码，不会出现拉伸效果
overflow: hidden;
}
resize属性的拖拽条和滚动条是同源的，所以就是在自定义滚动条尺寸的时候，resize属性拖拽条的尺寸也会跟着变化。resize属性拖拽条的样式可以使用::-wekit-resizer伪元素进行自定义，比如当我们换成另外的拖拽图标。由于resize属性生成的拖拽区域太小，如果在移动端使用并不是体验太好。
::-webkit-scrollabar {
background-image: url(test.png);
}
如果我们想要拉伸的元素最小宽度为166px, 最大宽度为555px，我们可以这样进行设置：
.wrapper {
min-width: 166px;
max-width: 555px;
overflow: hidden;
resize: both;
}
