CSS3用户界面特性-优快云博客

本文介绍了CSS3中新增的用户界面特性，包括resize属性、box-sizing属性和outline-offset属性的应用实例。通过这些特性，开发者可以更好地控制网页元素的尺寸、布局及外观。

1. 在CSS3中, 新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓偏移等。

2. 下面的表格列出了所有的转换属性

3. resize属性

3.1. resize属性规定是否可由用户调整元素的尺寸。

3.2. 如果希望此属性生效, 需要设置元素的overflow属性, 值可以是auto、hidden或scroll。

3.3. 默认值

3.4. 可能值

3.5. 例子

3.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 用户界面-resize属性</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				border: 2px solid;
				padding: 10px 40px; 
				width: 300px;
				resize: both;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div>resize属性规定是否可由用户调整元素尺寸。</div>
	</body>
</html>

3.5.2. 效果图

4. 盒尺寸

4.1. box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。

4.2. 语法

box-sizing: content-box|border-box|inherit;

4.3. 默认值

4.4. 可能值

4.5. 例子

4.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>盒尺寸</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			div.container {
				width: 30em;
				border: 1em solid;
				float: left;
			}
			div.box {
				width: 50%;
				border: 1em solid red;
				float: left;
				/*没有这个属性一行容纳不了2个盒子*/
				box-sizing: border-box; 
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">这个 div 占据左半部分。</div>
			<div class="box">这个 div 占据右半部分。</div>
		</div>
	</body>
</html>

4.5.2. 效果图

5. 轮廓偏移

5.1. outline-offset 属性对轮廓进行偏移, 并在边框边缘进行绘制。

5.2. 轮廓在两方面与边框不同:

轮廓不占用空间
轮廓可能是非矩形

5.3. 语法

outline-offset: length|inherit;

5.4. 默认值

5.5. 可能值

5.6. 例子

5.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>轮廓偏移</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			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像素处有一个轮廓。</div>
	</body>
</html>

5.6.2. 效果图