CSS User Interface

2025年3月26日 | 阅读 3 分钟

CSS 提供了许多用户界面功能，如调整元素大小、边框和盒模型大小。

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

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

注意:resize 和 outline-offset 是 CSS 用户界面中最重要的属性。Resize 属性可以有 3 个常见值

水平调整大小
垂直调整大小
同时调整大小（水平和垂直）。

CSS3 Resize 属性

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

水平调整大小

让我们以调整 <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

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>

支持的浏览器

属性	Chrome	IE	火狐	Opera	Safari
resize	4.0	不支持	5.04.0 -moz-	15.0	4.0
outline-offset	4.0	不支持	5.0 4.0 -moz-	9.5	4.0

下一个主题CSS 分页

CSS User Interface

CSS3 Resize 属性

水平调整大小

垂直调整大小

同时调整大小（水平和垂直）

CSS3 Outline Offset

支持的浏览器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS User Interface

CSS3 Resize 属性

水平调整大小

垂直调整大小

同时调整大小（水平和垂直）

CSS3 Outline Offset

支持的浏览器

相关帖子

CSS Tooltip Animation

CSS @Media Query

CSS Tooltips

flex-grow property

CSS radial-gradient

flex-basis property

CSS Pagination

CSS Gradient

CSS Animation

CSS Pseudo-elements

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器