📌  相关文章
📜  CSS 用户界面

📅  最后修改于: 2020-11-05 08:55:35             🧑  作者: Mango

CSS用户界面

CSS提供了许多用户界面功能，例如调整元素大小，轮廓和框大小。

以下是CSS3用户界面的一些常见属性的列表：

Values Description
appearance It facilitates users to make elements as user interface elements.
box-sizing It facilitates users to fix elements on area in clear way.
icon It is used to provide the icon on area.
resize It is used to resize elements which are on area.
outline-offset It is used to set space between an outline and the edge or border of an element.
nav-down It is used to move down while pressing the down arrow button in keypad.
nav-left It is used to move left while pressing the left arrow button in keypad.
nav-right It is used to move right while pressing the right arrow button in keypad.
nav-up It is used to move up while pressing the up arrow button in keypad.

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

  • 水平调整
  • 垂直调整大小
  • 两种(水平和垂直)尺寸都可以调整。

CSS3调整大小属性

CSS3 resize属性指定元素是否应由用户调整大小。

水平调整

让我们举一个例子来调整一个

元件。 (水平调整大小)

请参阅以下示例：








Note: Internet Explorer does not support the resize property.


This example specifies how to resize the width of a div element.

范例2：

垂直调整大小

让我们举个例子来调整一个

元件。 (垂直调整大小)

请参阅以下示例：








Note: Internet Explorer does not support the resize property.


This example specifies how to resize the height of a div element.

两种(水平和垂直)尺寸都可以调整

您还可以调整广告素材的宽度和高度

元件。

请参阅以下示例：








Note: Internet Explorer does not support the resize property.


This example specifies how to resize both the height and the width of this div element.

CSS3轮廓偏移

outline-offset属性用于在元素的轮廓和边框之间添加空间。

请参阅以下示例：








Note: Internet Explorer does not support the outline-offset property.


This example specifies an outline 10px outside the border edge.

支持的浏览器

Property Chrome IE Firefox Opera Safari
resize 4.0 not supported
5.04.0 -moz-
 15.0 4.0
outline-offset 4.0 not supported

5.0

4.0 -moz-
 9.5 4.0