resize不是已知的css屬性？
- 青灯夜游原創
- 2020-11-24 14:08:422168瀏覽
resize是已知的css屬性。 resize是CSS3中新增的屬性，用來指定一個元素是否是由使用者調整大小的；resize屬性允許使用者透過拖曳的方式，來自由縮放元素的尺寸。
該方法適用於所有品牌的電腦。
相關推薦：《CSS3影片教學》
css resize屬性
resize屬性可以指定一個元素是否是由使用者調整大小的。
resize是CSS3中新增的屬性，它允許使用者透過拖曳的方式，來自由縮放元素的尺寸，用來增強使用者體驗。這在以前只能透過Javascript 編寫大量腳本來實現，費時費力，效率低。
resize屬性可以用來根據使用者需求以及在哪個方向上調整元素的大小。 resize屬性可以採用4個值。
句法：
Element{
Resize : none|both|vertical|horizontal;
}
讓我們看一下每個屬性...
1) resize : none
當使用者不想調整元素的大小時， none值不會套用到resize屬性 。也是預設值。
句法：
Element{
resize:none;
}
範例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>None value doesn’t allow resizing of this p element.</p>
</p>
</body>
</html>
輸出
在上面的範例中，您無法調整p元素的大小。它是靜態的。
2) resize : both
當使用者希望其元素在寬度和高度的兩側都可調整大小時， 兩個值都會套用到resize屬性 。
句法：
Element{
resize:both;
}
範例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>click and drag the bottom right corner to resize the height and width of this p element.</p>
</p>
</body>
</html>
輸出
在上面的範例中，若要調整大小，請按一下並拖曳此p元素的右下角。
3) resize : vertical
當使用者想要根據需要調整元素的高度時，將垂直值套用到resize屬性 。
句法：
Element{
resize:vertical;
}
範例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>click and drag the bottom right corner to resize the height of this p element.</p>
</p>
</body>
</html>
輸出
在上面的範例中，使用者可以點擊並拖曳此p元素的右下角以調整其高度。
4) resize : horizontal
當使用者要根據需要調整元素的寬度大小時，將水平值套用到resize屬性 。
句法：
Element{
resize:horizontal;
}
範例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>click and drag the bottom right corner to resize the width of this p element.</p>
</p>
</body>
</html>
輸出
在上面的範例中，使用者可以點擊並拖曳此p元素的右下角以調整其寬度。
更多程式相關知識，請造訪：程式設計教學！ ！
以上是resize不是已知的css屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼設定圖片不停旋轉下一篇：css怎麼設定圖片不停旋轉