CSS3 提供了一些用于美化用户界面的样式和效果。以下是一些与用户界面相关的 CSS3 属性和特性：

1. 自定义滚动条（::-webkit-scrollbar）： WebKit 内核浏览器（如 Chrome 和 Safari）支持自定义滚动条样式。
    /* 隐藏滚动条 */
    ::-webkit-scrollbar {
        display: none;
    }

    /* 自定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        border-radius: 6px;
    }

2. 用户选择（user-select）： 控制用户是否能够选中文本。
    /* 禁止用户选中文本 */
    user-select: none;

3. 文本溢出省略号（text-overflow）： 当文本溢出容器时，可以使用省略号来表示。
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

4. 表单样式（appearance）： 定义表单元素的外观。
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* 自定义样式 */
        width: 20px;
        height: 20px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
    }

5. 鼠标样式（cursor）： 定义鼠标悬停在元素上时的样式。
    /* 小手光标 */
    cursor: pointer;

6. 轮廓线（outline）： 用于定义元素轮廓线的样式。
    outline: 2px solid #007bff;

7. 调整控制点（resize）： 控制元素是否可调整大小。
    resize: both; /* 可以在水平和垂直方向调整大小 */

8. 用户界面字体（font-smooth）： 控制字体在 Windows 上是否启用平滑处理。
    font-smooth: always;

以上是一些用于用户界面样式的 CSS3 属性，它们可以用来改进页面的交互性、可读性和美观性。在设计用户界面时，可以根据具体需求选择合适的样式和效果。


转载请注明出处：http://www.pingtaimeng.com/article/detail/12569/CSS