resize

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

resize CSS 屬性設定元素是否可調整大小，以及在哪個方向調整大小。

試一試

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

resize 不適用於以下情況：

內聯元素
其 overflow 屬性設定為 visible 或 clip 的塊級元素

語法

css

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

resize 屬性指定為以下列表中的單個關鍵字值。

值

none: 元素不提供使用者可控制的調整大小方法。
both: 元素顯示一個允許使用者調整其大小的機制，該機制可以水平和垂直調整大小。
horizontal: 元素顯示一個允許使用者在*水平*方向調整其大小的機制。
vertical: 元素顯示一個允許使用者在*垂直*方向調整其大小的機制。
block: 元素顯示一個允許使用者在*塊*方向調整其大小的機制（水平或垂直，取決於 writing-mode 和 direction 值）。
inline: 元素顯示一個允許使用者在*內聯*方向調整其大小的機制（水平或垂直，取決於 writing-mode 和 direction 值）。

正式定義

初始值	`none`
應用於	`overflow` 非 `visible` 的元素，以及可選地表示影像或影片的替換元素和 iframe。
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

示例

停用文字區域的可調整大小性

在許多瀏覽器中，<textarea> 元素預設是可調整大小的。您可以使用 resize 屬性覆蓋此行為。

HTML

html

<textarea>Type some text here.</textarea>

CSS

css

textarea {
  resize: none; /* Disables resizability */
}

結果

將 resize 與任意元素一起使用

您可以使用 resize 屬性使任何元素可調整大小。在下面的示例中，一個可調整大小的 <div> 包含一個可調整大小的段落（<p> 元素）。

HTML

html

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>

CSS

css

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

結果

規範

規範
CSS Basic User Interface Module Level 4 # resize

瀏覽器相容性

另見

<textarea>

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者於 2025 年 8 月 9 日最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題