Shulou(Shulou.com)06/01 Report--

This article is about how css3 modifies the size of elements through the resize attribute. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

To enhance the user experience, CSS3 adds a number of new attributes, one of which is resizing, which allows users to resize elements by dragging.

So far, it has been mainly used in any container element that can use overflow attributes.

Before this, designers need to write a large number of scripts through JavaScript to achieve the same UI effect, which is time-consuming and inefficient.

Resize is a very useful property added to CSS3.

The initial value of the resize attribute is none and applies to all elements whose overflow attribute is not visible. The values are simply described as follows:

None: browsers do not provide a resizing mechanism, and users cannot manipulate the mechanism to resize elements.

Both: browsers provide a two-way resizing mechanism that allows users to adjust the width and height of elements.

Horizontal: browsers provide an one-way horizontal resizing mechanism that allows users to adjust the width of elements.

Vertical: browsers provide an one-way vertical resizing mechanism that allows users to adjust the height of elements.

Inherit: inherit from.

CSS3 allows attributes to be applied to any element, which gives web page extensions cross-browser support.

Place the mouse in the lower right corner to surpass the size of the element.

The specific code is as follows:

# resize {

Background: url (images / img10.jpg) has no repetitive center

-moz-background-clip:content

-webkit-background-clip:content

Background-clip:content

Width: 200 pixels

Height: 120 pixels

Max-width:800px

Max-height:600px

Inside margin: 6px

Border: 1px Pure Red

Resize: both

Overflow: automatic

}

Thank you for reading! This is the end of this article on "how css3 modifies element size through resize attributes". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.