技術文章 » resize不是已知的css屬性？

resize不是已知的css屬性？

2020-11-24 15:01:33

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>

輸出

CSS | resize Property | Example 1

在上面的範例中，您無法調整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>

輸出

CSS | resize Property | Example 2

在上面的範例中，要調整大小，請單擊並拖動此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>

輸出

CSS | resize Property | Example 3

在上面的範例中，使用者可以單擊並拖動此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>

輸出

CSS | resize Property | Example 4

在上面的範例中，使用者可以單擊並拖動此p元素的右下角以調整其寬度。

更多程式設計相關知識，請存取：！！

以上就是resize不是已知的css屬性？的詳細內容，更多請關注TW511.COM其它相關文章！