CSS3 user interface

CSS3 User Interface

In CSS3, some new user interface features have been added to adjust element size, box size and outer border.

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

resize
box-sizing
outline-offset

CSS3 Resize

CSS3, the resize attribute specifies whether an element should be resized by the user.

This div element is resized by the user. (In Firefox 4+, Chrome, and Safari)

CSS code is as follows:

##Example

The user specifies the size of a div element:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            border:2px solid;
            padding:10px 40px;
            width:300px;
            resize:both;
            overflow:auto;
        }
    </style>
</head>
<body>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

Run the program and try it

CSS3 Box Sizing

The box-sizing property allows you to define in an exact way how specific content will fit into a zone.

Example

Specifies two side-by-side bordered boxes:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>

Run the program and try it

CSS3 outline modification (outline-offset)

The outline-offset property offsets the outline. And draw the outline beyond the edge of the border.

There are two differences between outlines and borders:

The outline does not take up space. The outline may be non-rectangular

Example

Specify the outline 15 pixels outside the edge of the border:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
} 
</style>
</head>
<body>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>

Run the program and try it

New User Interface Features

##PropertiesDescriptionCSSappearanceAllows you to make an element look like a standard user interface element3box-sizingAllows you to define certain elements in a way to fit the area3icon Provides creators with the ability to set elements to their icon equivalents. 3nav-downSpecifies where to navigate when using the arrow down navigation key3nav-indexSpecify the order of the Tabs of an element3nav-leftSpecify where to use the left arrow navigation keys to navigate3nav-rightSpecify where to use Arrow navigation keys on the right to navigate3nav-upSpecifies where to navigate using the arrow up navigation key3outline-offsetOutline modification and drawing the edge beyond the border3resizeSpecifies whether an element is resized by the user3

##Next Section

new file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
} 
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>

<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>

</body>
</html>

submit Reset Code

Automatic operation

Full Screen