CSS3 resize property

 The function of the CSS3 resize property is to allow web users to adjust the size of the div block element by themselves, so that the traditional fixed DIV block has an adjustable function. Web designers can use the function of the CSS3 resize property to open DIV. The range that the block can be adjusted, such as the width and height can be adjusted, the width can only be adjusted, or the height can only be adjusted. Web designers can make limited openings according to the functional requirements of the web page. This is the main function of the CSS3 resize property. However, some browsers do not support the effect of the CSS3 resize attribute, because this is a new feature of CSS3. It is recommended that web designers find more browsers to test the effect when adopting themes.

Tested on 2015/5/11, browsers that support the CSS3 resize attribute include FireFox, Chrome, Opera, Safari, etc., but they must be matched with the overflow attribute to work properly. As for IE11, it still does not support it.

CSS3 resize property syntax

resize: parameter value;

The parameter value of CSS3 resize is the range that can be adjusted to control whether to open or not, organized as follows:

CSS3 resize property parameter value

Width value	grammar	Description
none	resize:none;	By default, the viewer cannot adjust the size of the DIV block.
both	resize:both;	Viewers can adjust the width and height of the DIV block by themselves
horizontal	resize:horizontal;	Viewers can only adjust the width of the DIV block by themselves
vertical	resize:vertical;	Viewers can only adjust the height of the DIV block by themselves

CSS3 resize property example

<div style="border:2px #ccc solid;padding:30px; width:380px;resize:both;overflow:auto;">
Test the effect of applying the CSS3 resize property to the DIV block
</div>

The output effect of the example (there is a pullable symbol in the lower right corner of the DIV block)

Test the effect of applying CSS3's resize property to the DIV block

The default width of the DIV block in the example is 380px. We add the syntax "resize:both;" to this DIV block so that the viewer can adjust the width and height of the DIV block by themselves . Here we also use "overflow: auto;”, so that the effect of resize will appear. If your DIV block needs to be expanded or reduced by netizens, the CSS3 resize property is very useful, but it is still recommended to find more browsers for testing .