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

概要

+ +

outline-style CSS 属性被用于设置一个元素轮廓的样式。

+ +

元素轮廓是绘制于元素周围的一条线，位于{{cssxref("border")}}的外围，使元素突出

+ +

大多时候使用{{cssxref("outline")}}而不是 outline-style, outline-width 和 outline-color会更方便.

+ +

{{cssinfo}}

+ +

语法

+ +
/* 关键字 值 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* 全局 值*/
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

取值

+ +

<br-style> 可为以下这些值:

+ +
+
none
+
+
无轮廓 ({{Cssxref("outline-width")}} 为 0).
+
dotted
+
+
轮廓为一系列点.
+
dashed
+
+
轮廓为一系列短线.
+
solid
+
+
轮廓为实线.
+
double
+
+
轮廓为两根有空隙的线. {{Cssxref("outline-width")}} 为线与空间的总和.
+
groove
+
+
轮廓呈凹下状.
+
ridge
+
+
与 groove相反: 轮廓呈凸起状.
+
inset
+
+
轮廓呈嵌入状.
+
outset
+
+
与 inset相反: 轮廓呈突出状.
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例 1  dotted 和 dashed

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* 于 "outline: dotted"等价 */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

+ +

示例 2 - solid 和 double

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

+ +

示例 3 - groove 和 ridge

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

+ +

示例 4 - inset 和 outset

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Added auto value
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Initial definition
+ +

浏览器兼容性

+ +

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

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.5 (1.8)[1]8.07.01.2 (125)
auto{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("46")}}10123.2
auto{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko 1.8及以前 (Firefox 1.5) 该效果可用Mozilla CSS Extension 实现{{Cssxref("-moz-outline-style")}}.

-- cgit v1.2.3-54-g00ecf