CSS3 - 用户界面(CSS3 - User Interface)
用户界面属性允许您将任何元素更改为多个标准用户界面元素之一。
在css3用户界面中使用的一些常见属性。
| Sr.No. | 价值和描述 |
|---|---|
| 1 | appearance 用于允许用户将元素作为用户界面元素。 |
| 2 | box-sizing 允许用户以清晰的方式修复区域上的元素。 |
| 3 | icon 用于在区域上提供图标。 |
| 4 | resize 用于调整区域上的元素的大小。 |
| 5 | outline-offset 用于绘制轮廓的背后。 |
| 6 | nav-down 用于在键盘上按下向下箭头按钮时向下移动。 |
| 7 | nav-left 按下键盘上的左箭头按钮时，向左移动。 |
| 8 | nav-right 用于在键盘上按下右箭头按钮时向右移动。 |
| 9 | nav-up 按下键盘上的向上箭头按钮时用于向上移动。 |
调整大小属性的示例
Resize属性有三个常见值，如下所示 -
- horizontal
- vertical
- both
在css3用户界面中使用resize属性中的both值 -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>iowiki.com</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3轮廓偏移量
外线表示在边框外部的元素周围绘制一条线。
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>IoWiki</div>
</body>
</html>
它会产生以下结果 -
新页面打开