CSS3 Tutorial-user interface

Hello! Front-end development of small partners, thank you have been accompanying me, today this CSS3 tutorial-user interface, is the CSS3 tutorial last article, I hope you can learn the real practical things.

CSS3 provides a unique rendering property for the website interface, which is described in detail in this article.

CSS3 User interface:

In CSS3, new user interface features include resetting element dimensions, box sizes, outlines, and more.

In this chapter, you will learn the following user interface properties:

1, resize;

2, box-sizing;

3, Outline-offset.

Browser support:

Firefox, Chrome, and Safari support the Resize property.

Internet Explorer, Chrome, Safari, and Opera support the Box-sizing property. Firefox needs a prefix-moz-.

All major browsers support the Outline-offset property, in addition to Internet Explorer.

CSS3 resizing:

The Css3,resize property specifies whether the element size can be adjusted by the user.

The CSS code is as follows:

Instance:

Specifies that the P element can be resized by the user:

P{resize:both;overflow:auto;}

CSS3 Box Sizing:

The Box-sizing property allows you to define exactly what is appropriate for a particular area.

Instance:

Specify two sides of the bounding box:

P{box-sizing:border-box;-moz-box-sizing:border-box,/* Firefox */-webkit-box-sizing:border-box;/* Safari */width:50 %;float:left;}

CSS3 Outline Offset:

The Outline-offset property offsets the outline and draws the outline at a position beyond the edge of the border.

The outline differs from the border by two points:

1, the contour does not occupy the space;

2, the contour may be non-rectangular.

The CSS code is as follows:

Instance:

Outlines 15 pixels outside the edge of the bounding rectangle:

P{BORDER:2PX solid black;outline:2px solid red;outline-offset:15px;}

New user Interface Properties:

The following table lists all the conversion properties:

The above is CSS3 Tutorial-user interface content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

