resize不是已知的css屬性？-css教學-PHP中文網

resize不是已知的css屬性？

青灯夜游

發布： 2020-11-24 14:08:42

原創

2164 人瀏覽過

resize是已知的css屬性。 resize是CSS3中新增的屬性，用來指定一個元素是否是由使用者調整大小的；resize屬性允許使用者透過拖曳的方式，來自由縮放元素的尺寸。

resize不是已知的css屬性？

該方法適用於所有品牌的電腦。

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