天天看点

CSS 之用户界面(User Interface)

一、属性

Properties

属性

Description

简介

text-overflow 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出
outline 复合属性。设置或检索对象外的线条轮廓
outline-width 设置或检索对象外的线条轮廓的宽度
outline-style 设置或检索对象外的线条轮廓的样式
outline-color 设置或检索对象外的线条轮廓的颜色
outline-offset 设置或检索对象外的线条轮廓偏移位置的数值
nav-index 设置或检索对象的导航顺序。
nav-up 设置或检索对象的导航方向。
nav-right 设置或检索对象的导航方向。
nav-down 设置或检索对象的导航方向。
nav-left 设置或检索对象的导航方向。
cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
zoom 设置或检索对象的缩放比例。
box-sizing 设置或检索对象的盒模型组成模式。
resize 设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。
ime-mode 设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
    <style>
        .test {
            width: 200px;
            height: 70px;
            padding: 10px;
            border: 15px solid #999;
            -moz-box-sizing: content-box;
            -ms-box-sizing: content-box;
            box-sizing: content-box;
            background: #eee;
        }

        .test2 {
            width: 200px;
            height: 70px;
            padding: 10px;
            border: 15px solid #999;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: #eee;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="test">content-box</div>
<div class="test2">border-box</div>
</body>

</html>      
CSS 之用户界面(User Interface)