天天看點

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)