CSS3中的resize

在CSS3中，我們可以通過resize屬性來控制元素的可調整大小性質。

該屬性允許用戶在元素的右下角拖拽，改變元素的寬度和高度。 當然，對于某些元素如圖片和視頻，我們需要將其放在一個容器中，才能使resize生效。

.container {
resize: both;
overflow: auto;
}

在上面的代碼中，我們設置了一個容器，并將其resize屬性設置為both。這意味著可以同時通過拖動寬度和高度來改變元素大小。

同時，我們將容器的overflow屬性設置為auto，這樣在元素大小發生變化時，它的內容也能夠跟著自適應。

resize屬性有以下選項：

• none：元素不能被調整大小。
• both: 可以同時通過拖動寬度和高度改變元素大小。
• horizontal：可以通過拖動寬度改變元素大小，但不能改變高度。
• vertical：可以通過拖動高度改變元素大小，但不能改變寬度。
• initial：將resize重置為默認值，即none。

.box {
resize: horizontal;
}

在上面的代碼中，我們把resize設置為horizontal，這意味著我們只能通過拖動元素的寬度來調整大小，而高度則不受影響。

總之，resize是一個非常有用的屬性，可以使用戶通過拖動來自由改變元素大小，增加了頁面的交互性和可操作性。