CSS3 基础（011_用户接口）

最新推荐文章于 2024-10-16 23:00:23 发布

柯南道尔2606

最新推荐文章于 2024-10-16 23:00:23 发布

阅读量404

点赞数

分类专栏： CSS 文章标签： css3

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css3_user_interface.asp

翻译：

CSS3 用户接口（CSS3 User Interface）

CSS3 用户接口

CSS3 有新的用户接口特点，例如 resizing elements、outlines 以及 box sizing 。
本章，你将学习以下用户接口属性：

resize
outline-offset

Browser Support

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit- 或 -moz- 指定带前缀工作的第一个版本号。

属性（Property）
word-break	4.0	Not supported	5.0 4.0 -moz-	4.0	15.0
word-break	4.0	Not supported	5.0 4.0 -moz-	4.0	9.5

CSS3 Resizing

resize 属性指定用户对元素是否可调整大小。
下列示例允许用户只可调整 <div> 元素的宽度：

div {
    resize: horizontal;
    overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: horizontal;
    overflow: auto;
}
</style>
</head>
<body>
    <p><b>Note:</b> Internet Explorer does not support the resize property.</p>
    <div>Let the user resize the width of this div element.</div>
</body>
</html>

下列示例允许用户只可调整 <div> 元素的高度：

div {
    resize: vertical;
    overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: vertical;
    overflow: auto;
}
</style>
</head>
<body>
    <p><b>Note:</b> Internet Explorer does not support the resize property.</p>
    <div>Let the user resize the height of this div element.</div>
</body>
</html>

下列示例允许用户可调整 <div> 元素的宽和高：

div {
    resize: both;
    overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: both;
    overflow: auto;
}
</style>
</head>
<body>
    <p><b>Note:</b> Internet Explorer does not support the resize property.</p>
    <div>Let the user resize both the height and the width of this div element.</div>
</body>
</html>

CSS3 Outline Offset

outline-offset 属性在元素的轮廓和边界或边框之间增加空白。
轮廓和边框有以下区别：

轮廓是围绕元素的线，位于边框之外
轮廓不占空间
轮廓可以是非矩形

下列示例使用 outline-offset 属性在边框和轮廓之间增加 15px 的空间：

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 20px;
    padding: 10px;
    width: 300px;
    height: 100px;
    border: 1px solid black;
    outline: 1px solid red; /* Move the outline 15px away from the border */
    outline-offset: 15px;
}
</style>
</head>
<body>
    <p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
    <div>This div has an outline 15px outside the border edge.</div>
</body>
</html>