轮廓是边界的替代。
轮廓线是围绕边框外的元素绘制的线。
+-------------------------------------+ | Outline | | +-----------------------------+ | | |Border | | | | +--------------------+ | | | | |Padding | | | | | | +--------------+ | | | | | | |Content | | | | | | | | | | | | | | | +--------------+ | | | | | | | | | | | +--------------------+ | | | | | | | +-----------------------------+ | | | +-------------------------------------+
我们可以用样式，颜色和宽度来设计轮廓。
outline 属性与 border 属性不同：outline不是元素尺寸的一部分，元素的总宽度和高度不受轮廓宽度的影响。
轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。
以下列表描述了与轮廓相关的元素。
outline-style 属性指定轮廓的样式。
下表列出了outline-style的可能值。
| 值 | 描述 |
|---|---|
| none | 没有轮廓。 这是默认值 |
| hidden | 隐藏轮廓 |
| dotted | 点状轮廓 |
| dashed | 虚线轮廓 |
| solid | 实线轮廓 |
| double | 双轮廓 |
| groove | 一个3D槽轮廓。 效果取决于轮廓颜色值 |
| ridge | 3D垄状轮廓。 效果取决于轮廓颜色值 |
| inset | 3D inset 轮廓。 效果取决于轮廓颜色值 |
| outset | 3D outset 轮廓。 效果取决于轮廓颜色值 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
仅当指定了!DOCTYPE时，IE8才支持轮廓属性。
以下代码显示如何使用轮廓样式。
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} outline-color 属性设置轮廓的颜色。
p {
outline-style: dotted;
outline-color: #00ff00;
}
outline-width 设置轮廓的宽度。
| 值 | 描述 |
|---|---|
| medium | 中等轮廓。这是默认值 |
| thin | 细轮廓 |
| thick | 粗轮廓 |
| length | 允许您定义轮廓的粗细 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
以下代码设置轮廓宽度。
p {
outline-style: dotted;
outline-width: 5px;
}
outline 简写属性在一个声明中设置所有轮廓属性。
简写属性具有以下语法：
outline: outline-color, outline-style, outline-width<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>This is a test</p>
</body>
</html>| 属性 | 描述 | CSS |
|---|---|---|
| outline-color | 设置轮廓颜色 | 3 |
| outline-offset | 设置轮廓偏移 | 3 |
| outline-style | 设置轮廓样式 | 3 |
| outline-width | 设置轮廓宽度 | 3 |
| outline | 轮廓的简写属性 | 3 |
HTML embed 标签width 属性用于设置 embed 标签中插入的内容的宽度，请参考下述示例：实例一个高度和宽度为 200 像素的 flash 动...
HTML button 标签name 属性设置HTML中按钮的名称，用来提交某些值，请参考下文以了解该属性的详细使用情况。实例两个按钮带有相...
HTML menu 标签label 属性规定了菜单的可见标签，请参考下述示例：实例带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮...
实例使用 template 标签在页面加载时该标签中的内容不会显示，加载后可以使用 JavaScript 来显示它：buttononclick="showContent...
实例HTML5 tfoot标签用于表示一个表格中的页脚。请参考下述示例：带有 thead、tfoot 和 tbody 元素的 HTML 表格：table border="...