resize不是已知的css屬性？

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;
    }

範例：

nbsp;html>




    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: none;
        }
    </style>



    <h1 id="The-resize-Property">The resize Property</h1>
    <p>
        </p><p>None value doesn’t allow resizing of this p element.</p>
    

輸出

在上面的範例中，您無法調整p元素的大小。它是靜態的。

2) resize : both

當使用者希望其元素在寬度和高度的兩側都可調整大小時， 兩個值都會套用到resize屬性 。

句法：

    Element{
        resize:both;
    }

範例：

nbsp;html>




    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>



    <h1 id="The-resize-Property">The resize Property</h1>
    <p>
        </p><p>click and drag the bottom right corner to resize the height and width of this p element.</p>
    

輸出

在上面的範例中，若要調整大小，請按一下並拖曳此p元素的右下角。

3) resize : vertical

當使用者想要根據需要調整元素的高度時，將垂直值套用到resize屬性 。

句法：

    Element{
        resize:vertical;
    }

範例：

nbsp;html>




    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: vertical;
            overflow: auto;
        }
    </style>



    <h1 id="The-resize-Property">The resize Property</h1>
    <p>
        </p><p>click and drag the bottom right corner to resize the height of this p element.</p>
    

輸出

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

4) resize : horizo​​ntal

當使用者要根據需要調整元素的寬度大小時，將水平值套用到resize屬性 。

句法：

    Element{
        resize:horizontal;
    }

範例：

nbsp;html>




    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: horizontal;
            overflow: auto;
        }
    </style>



    <h1 id="The-resize-Property">The resize Property</h1>
    <p>
        </p><p>click and drag the bottom right corner to resize the width of this p element.</p>
    

輸出

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

更多程式相關知識，請造訪：程式設計教學！ ！

以上是resize不是已知的css屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！