From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/outline/index.html | 135 +++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 files/zh-cn/web/css/outline/index.html (limited to 'files/zh-cn/web/css/outline') diff --git a/files/zh-cn/web/css/outline/index.html b/files/zh-cn/web/css/outline/index.html new file mode 100644 index 0000000000..64d1db06c4 --- /dev/null +++ b/files/zh-cn/web/css/outline/index.html @@ -0,0 +1,135 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS属性 + - CSS轮廓 + - 参考 + - 布局 + - 轮廓 +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 ， 例如 {{cssxref("outline-style")}}, {{cssxref("outline-width")}} 和 {{cssxref("outline-color")}}。 

+ +

{{EmbedInteractiveExample("pages/css/outline.html")}}

+ +

与其他简写属性一样，忽略的子属性会被设为 初始值。

+ +

border 和 outline

+ +

border 和 outline 很类似，但有如下区别：

+ + + +

语法

+ +
/* 样式 */
+outline: solid;
+
+/* 颜色 | 样式 */
+outline: #f66 dashed;
+
+/* 样式 | 宽度 */
+outline: inset thick;
+
+/* 颜色 | 样式 | 宽度 */
+outline: green solid 3px;
+
+/* 全局值 */
+outline: inherit;
+outline: initial;
+outline: unset;
+ +

outline 属性可使用以下一个、两个或三个值来声明，且顺序不重要。

+ +
+

注意：对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。

+
+ +

取值

+ +
+
<'outline-color'>
+
设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 {{cssxref("outline-color")}}。
+
<'outline-style'>
+
设置轮廓的样式。没有设置时默认值为 none。参见 {{cssxref("outline-style")}}。
+
<'outline-width'>
+
设置轮廓的宽度。没有设置时默认值为 medium。参见 {{cssxref("outline-width")}}。
+
+ +

形式语法

+ +
{{csssyntax("outline")}}
+ +

示例

+ +

HTML

+ +
<a href="#">This link has a special focus style.</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+ +

结果

+ +

可访问性考虑

+ +

将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}No change.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.outline")}}

-- cgit v1.2.3-54-g00ecf