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-offset/index.html | 137 ++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/zh-cn/web/css/outline-offset/index.html (limited to 'files/zh-cn/web/css/outline-offset/index.html') diff --git a/files/zh-cn/web/css/outline-offset/index.html b/files/zh-cn/web/css/outline-offset/index.html new file mode 100644 index 0000000000..b195c09a4e --- /dev/null +++ b/files/zh-cn/web/css/outline-offset/index.html @@ -0,0 +1,137 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - outline-offset +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

概要

+ +

outline-offset CSS 属性用于设置 {{ cssxref("outline") }} 与一个元素边缘或边框之间的间隙。

+ +

outline是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

+ +

{{cssinfo}}

+ +

The space will be transparent (the parent will determine the background).

+ +

Syntax

+ +
/* <length> values */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Global values */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+
+ +

Values

+ +
+
<length>
+
元素和轮廓间的宽度. 详见 {{cssxref("<length>")}} . 负值将轮廓绘制在元素之内.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
p {
+  outline: dashed thin;
+  /* Move the outline 10px away from the border */
+  outline-offset: 10px;
+  border:1px solid black;
+}
+
+ +

Html

+ +
<p>outline: offset 10px. Border is solid and outline is dashed</p>
+ +

上面的代码将产生以下效果:

+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+ +

另一个例子:

+ +

outline: multiple offsets;

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}{{ Spec2('CSS3 Transitions') }}Defines outline-offset as animatable.
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.8")}}{{ CompatNo() }}9.51.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
-- cgit v1.2.3-54-g00ecf