CSS用户界面设计 CSS用户界面|CSS2

本文概述

CSS3调整大小属性
水平调整
垂直调整大小
两种（水平和垂直）尺寸都可以调整
CSS3轮廓偏移
支持的浏览器

CSS提供了许多用户界面功能, 例如调整元素大小, 轮廓和框大小。
以下是CSS3用户界面的一些常见属性的列表：

值	描述
appearance	它有助于用户将元素制作为用户界面元素。
box-sizing	它有助于用户以清晰的方式将元素固定在区域上。
icon	用于在区域上提供图标。
resize	用于调整区域中元素的大小。
outline-offset	它用于设置轮廓与元素的边缘或边框之间的空间。
nav-down	在按下键盘上的向下箭头按钮时, 用于向下移动。
nav-left	按下键盘上的向左箭头按钮时, 可向左移动。
nav-right	按下键盘上的向右箭头按钮时, 可用于向右移动。
nav-up	按下键盘上的向上箭头按钮时, 可向上移动。

注意：调整大小和轮廓偏移是CSS用户界面的最重要属性。调整大小属性可以具有3个常用值：

水平调整
垂直调整大小
两种（水平和垂直）尺寸都可以调整。

CSS3调整大小属性CSS3 resize属性指定元素是否应由用户调整大小。
水平调整【CSS用户界面设计】让我们举一个例子来调整< div> 元素的宽度。（水平调整大小）
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> div { border: 2px solid; padding: 20px; width: 300px; resize: horizontal; overflow: auto; } < /style> < /head> < body> < p> < b> Note:< /b> Internet Explorer does not support the resize property.< /p> < div> This example specifies how to resize the width of a div element.< /div> < /body> < /html>

范例2：
垂直调整大小让我们举一个例子来调整< div> 元素的高度。（垂直调整大小）
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> div { border: 2px solid; padding: 20px; width: 300px; resize: vertical; overflow: auto; } < /style> < /head> < body> < p> < b> Note:< /b> Internet Explorer does not support the resize property.< /p> < div> This example specifies how to resize the height of a div element.< /div> < /body> < /html>

两种（水平和垂直）尺寸都可以调整你还可以调整< div> 元素的宽度和高度。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> div { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } < /style> < /head> < body> < p> < b> Note:< /b> Internet Explorer does not support the resize property.< /p> < div> This example specifies how to resize both the height and the width of this div element.< /div> < /body> < /html>

CSS3轮廓偏移outline-offset属性用于在元素的轮廓和边框之间添加空间。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> div { margin: 20px; padding: 10px; width: 300px; height: 100px; border: 1px solid black; outline: 1px solid red; outline-offset: 10px; } < /style> < /head> < body> < p> < b> Note:< /b> Internet Explorer does not support the outline-offset property.< /p> < div> This example specifies an outline 10px outside the border edge.< /div> < /body> < /html>

支持的浏览器