CSS3 用户界面（UI）相关的属性使得你可以更轻松地创建交互性和视觉效果丰富的界面。CSS3 提供了一些新特性，可以改善按钮、表单控件、滚动条、弹出框等元素的外观和行为。
1. cursor
cursor 属性控制鼠标指针的样式。你可以使用不同的光标样式来改善用户体验。
常见的光标类型：
default：默认光标（箭头）。pointer：手形光标，通常用于链接。crosshair：十字形光标。move：表示元素可移动的光标。text：文本选择光标（I形光标）。wait：表示等待的光标（旋转圆圈或沙漏）。
button {
cursor: pointer; /* 鼠标悬停时显示手形光标 */
}2. outline
outline 属性用于设置元素的轮廓，常用来创建按钮的焦点效果或者强调元素。outline 与 border 不同，它不会占据空间，不会影响布局。
示例：
button:focus {
outline: 2px solid #3498db; /* 聚焦时按钮显示蓝色轮廓 */
}3. box-shadow
box-shadow 属性用于给元素添加阴影效果，可以创建深度感或浮动效果。
语法：
box-shadow: h-offset v-offset blur spread color inset;h-offset：水平偏移量v-offset：垂直偏移量blur：模糊程度spread：阴影的扩展范围color：阴影的颜色inset：阴影内嵌到元素内（可选）
示例：
button {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* 给按钮添加阴影效果 */
}
button:hover {
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3); /* 鼠标悬停时增加阴影 */
}4. transition
transition 属性允许你为元素的属性变化添加过渡效果，能够提高用户界面的互动性。
示例：按钮过渡效果
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #2ecc71;
transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}5. transform
transform 属性允许你对元素进行平移、旋转、缩放和倾斜等操作，可以用来创建动画和动态效果。
示例：
button {
transform: scale(1); /* 初始状态，按钮大小为原始大小 */
transition: transform 0.2s ease; /* 缩放过渡效果 */
}
button:hover {
transform: scale(1.1); /* 鼠标悬停时，按钮放大 */
}6. resize
resize 属性允许用户通过拖动元素的边缘来调整其大小。通常适用于文本框、文本区域等。
textarea {
resize: both; /* 可以水平和垂直调整大小 */
width: 300px;
height: 150px;
}none：禁止调整大小。both：允许水平和垂直调整。horizontal：只允许水平调整。vertical：只允许垂直调整。
7. appearance
appearance 属性用于控制元素的外观，尤其是在不同平台上渲染元素时，使其样式更加一致。常用于表单控件。
input[type="button"], input[type="submit"] {
appearance: none; /* 使按钮外观不受浏览器默认样式影响 */
-webkit-appearance: none; /* 兼容旧版 Safari */
-moz-appearance: none; /* 兼容 Firefox */
}8. pointer-events
pointer-events 属性定义了当鼠标或触摸事件发生时，元素是否能够响应这些事件。常用于隐藏某些元素的交互性或创建透明点击区域。
auto：元素会响应鼠标事件。none：元素不会响应鼠标事件，任何点击事件都会传递给下层的元素。
示例：
div {
pointer-events: none; /* 禁止该元素响应鼠标事件 */
}9. user-select
user-select 属性控制用户是否可以选择元素的文本内容。这对于禁止或允许选择文本非常有用。
button {
user-select: none; /* 禁止选择按钮文本 */
}
p {
user-select: text; /* 允许选择段落文本 */
}10. scrollbar
CSS3 允许你自定义滚动条的外观，虽然并非所有浏览器都完全支持，但它在一些现代浏览器中已得到了广泛支持。
示例：自定义滚动条样式
/* 适用于 WebKit 浏览器，如 Chrome 和 Safari */
::-webkit-scrollbar {
width: 12px; /* 设置滚动条宽度 */
}
::-webkit-scrollbar-thumb {
background-color: #3498db; /* 设置滚动条滑块的颜色 */
border-radius: 6px; /* 设置圆角 */
}
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 设置滚动条轨道颜色 */
}11. box-sizing
box-sizing 属性决定元素的宽度和高度计算方式，默认为 content-box，也可以设置为 border-box 来包括内边距和边框。
* {
box-sizing: border-box; /* 包括边框和内边距在内的总宽高 */
}综合实例：美化按钮与表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 用户界面</title>
<style>
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #2ecc71;
transform: scale(1.1);
}
input[type="text"], textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
input[type="button"], input[type="submit"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
textarea {
height: 150px;
}
</style>
</head>
<body>
<button>Click Me</button>
<br><br>
<input type="text" placeholder="Enter your text">
<br><br>
<textarea placeholder="Write something..."></textarea>
</body>
</html>总结
CSS3 用户界面属性使得开发人员能够轻松创建交互性更强、视觉效果更丰富的用户界面。通过 cursor、box-shadow、resize、transition 等属性，界面元素的外观和行为都可以得到极大的增强，使得网页的用户体验更加流畅和现代。