33、CSS3 用户界面

新的用户界面属性

  • appearance ———— 允许您将元素设置为标准用户界面元素的外观
  • box-sizing —————允许您以确切的方式定义适应某个区域的具体内容
  • icon ——————— 为创作者提供使用图标化等价物来设置元素样式的能力
  • nav-index ————— 设置元素的 tab 键控制次序
  • outline-offset ——— 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
  • resize —————— 规定是否可由用户对元素的尺寸进行调整

1) appearance 属性
appearance 属性允许您使元素看上去像标准的用户界面元素。
其值有：

  • normal 将元素呈现为常规元素。
  • icon 将元素呈现为图标（小图片）。
  • window 将元素呈现为视口。
  • button 将元素呈现为按钮。
  • menu 将元素呈现为一套供用户选择的选项。
  • field 将元素呈现为输入字段。

例：设置div元素看起来像一个按钮

<html>
<head>
<style>
div {
  width: 100px; 
  height: 30px;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -moz-box;
  display: -webkit-box;
  appearance: button;
  -webkit-appearance: button; /* Safari 和 Chrome */
  -moz-appearance: button; /* Firefox */
}
</style>
</head>
<body>
  <div>确定</div>
</body>
</html>

所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

2) resize
resize 属性指定一个元素是否是由用户调整大小的。值有：
none： 用户不能调整元素大小
both： 用户可以调整元素的高度和宽度
horizontal：用户可以调整元素的宽度
vertical： 用户可以调整元素的高度
要使用 resize 属性，需要使用 overflow: auto;

例

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

拖拉红箭头就可以改变框的大小
图片说明

3) outline-offset 属性

<!DOCTYPE html>
<html>
<head>
<style> 
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>

图片说明