Skip to content

Commit

Permalink
convert to markdown for web/css zh-CN
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Aug 15, 2022
1 parent 33a6ac8 commit 90ff1a5
Show file tree
Hide file tree
Showing 388 changed files with 31,446 additions and 32,737 deletions.
79 changes: 39 additions & 40 deletions files/zh-cn/web/css/-moz-outline-radius/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ tags:
- 非标准
translation_of: Web/CSS/-moz-outline-radius
---
<div>{{CSSRef}}{{Non-standard_Header}}</div>
{{CSSRef}}{{Non-standard_Header}}

<p>在包括 Firefox 在内的 Mozilla 的应用里， <strong><code>-moz-outline-radius</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> 属性可以用作给一个元素 {{cssxref("outline")}} 圆角。</p>
在包括 Firefox 在内的 Mozilla 的应用里， **`-moz-outline-radius`** [CSS](/zh-CN/docs/Web/CSS) 属性可以用作给一个元素 {{cssxref("outline")}} 圆角。

<pre class="brush:css">/* 一个值 */
```css
/* 一个值 */
-moz-outline-radius: 25px;

/* 两个值 */
Expand All @@ -28,68 +29,66 @@ translation_of: Web/CSS/-moz-outline-radius
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;
</pre>
```

<p>这个属性是以下四个属性的简写：{{cssxref("-moz-outline-radius-topleft")}}、 {{cssxref("-moz-outline-radius-topright")}}、 {{cssxref("-moz-outline-radius-bottomright")}} 和 {{cssxref("-moz-outline-radius-bottomleft")}}。</p>
这个属性是以下四个属性的简写：{{cssxref("-moz-outline-radius-topleft")}}、 {{cssxref("-moz-outline-radius-topright")}}、 {{cssxref("-moz-outline-radius-bottomright")}} 和 {{cssxref("-moz-outline-radius-bottomleft")}}。

<p>{{cssinfo}}</p>
{{cssinfo}}

<h2 id="语法">语法</h2>
## 语法

<h3 id="值">值</h3>
### 值

<div class="note">省略的 outlines 和 <code>&lt;percentage&gt;</code> 的值与 {{cssxref("border-radius")}}中描述的语法一致。</div>
> **备注：** 省略的 outlines 和 `<percentage>` 的值与 {{cssxref("border-radius")}}中描述的语法一致。

<p>一个、两个、三个或四个 <code>&lt;outline-radius&gt;</code> 的值，代表着以下数值之一：</p>
一个、两个、三个或四个 `<outline-radius>` 的值，代表着以下数值之一：

<dl>
<dt>{{cssxref("&lt;length&gt;")}}</dt>
<dd>可能的值请参考 {{cssxref("&lt;length&gt;")}} 。</dd>
<dt>{{cssxref("&lt;percentage&gt;")}}</dt>
<dd>一个 {{cssxref("&lt;percentage&gt;")}}；详情请参考 {{cssxref("border-radius")}} 。</dd>
</dl>
- {{cssxref("&lt;length&gt;")}}
- : 可能的值请参考 {{cssxref("&lt;length&gt;")}} 。
- {{cssxref("&lt;percentage&gt;")}}
- : 一个 {{cssxref("&lt;percentage&gt;")}}；详情请参考 {{cssxref("border-radius")}} 。

<ul>
<li>如果仅有一个值，这个值应用到全部四个角。</li>
<li>如果设置了两个值，第一个值应用于左上角个右下角，第二个值应用于右上角和左下角。</li>
<li>如果设置了三个值，第一个值应用于左上角，第二个值应用于右上角个左下角，第三个值应用于右下角。</li>
<li>如果设置了四个值，第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。</li>
</ul>
- 如果仅有一个值，这个值应用到全部四个角。
- 如果设置了两个值，第一个值应用于左上角个右下角，第二个值应用于右上角和左下角。
- 如果设置了三个值，第一个值应用于左上角，第二个值应用于右上角个左下角，第三个值应用于右下角。
- 如果设置了四个值，第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。

<h3 id="正式语法">正式语法</h3>
### 正式语法

{{csssyntax}}

<h2 id="示例">示例</h2>
## 示例

<h3 id="HTML">HTML</h3>
### HTML

<pre class="brush: html">&lt;p&gt;This element has a rounded outline!&lt;/p&gt;</pre>
```html
<p>This element has a rounded outline!</p>
```

<h3 id="CSS">CSS</h3>
### CSS

<pre class="brush: css">p {
```css
p {
margin: 5px;
border: 1px solid black;
outline: dotted red;
-moz-outline-radius: 12% 1em 25px;
}</pre>
}
```

<h3 id="结果">结果</h3>
### 结果

<p>{{EmbedLiveSample('Example')}}</p>
{{EmbedLiveSample('Example')}}

<h2 id="备注">备注</h2>
## 备注

<ul>
<li>直至 Firefox 50 之前，<code>dotted</code> 或 <code>dashed</code> 圆角被渲染为 solid ，详见 {{bug("382721")}}</li>
<li>未来的 Gecko/Firefox 版本可能完全弃用这个属性。详见 {{bug("593717")}}.</li>
</ul>
- 直至 Firefox 50 之前，`dotted` 或 `dashed` 圆角被渲染为 solid ，详见 {{bug("382721")}}
- 未来的 Gecko/Firefox 版本可能完全弃用这个属性。详见 {{bug("593717")}}.

<h2 id="规范">规范</h2>
## 规范

<p>这个属性没有在任何 CSS 标准中被定义。</p>
这个属性没有在任何 CSS 标准中被定义。

<h2 id="浏览器兼容性">浏览器兼容性</h2>
## 浏览器兼容性

<p>{{Compat("css.properties.-moz-outline-radius")}}</p>
{{Compat("css.properties.-moz-outline-radius")}}
75 changes: 36 additions & 39 deletions files/zh-cn/web/css/-webkit-line-clamp/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,80 +3,77 @@ title: '-webkit-line-clamp'
slug: Web/CSS/-webkit-line-clamp
translation_of: Web/CSS/-webkit-line-clamp
---
<p>{{CSSRef}}</p>
{{CSSRef}}

<p><strong><code>-webkit-line-clamp</code></strong> CSS 属性 可以把 {{Glossary("块容器")}} 中的内容限制为指定的行数。</p>
**`-webkit-line-clamp`** CSS 属性 可以把 {{Glossary("块容器")}} 中的内容限制为指定的行数。

<p>它只有在 {{cssxref("display")}} 属性设置成 <code>-webkit-box</code> 或者 <code>-webkit-inline-box</code> 并且 {{cssxref("-webkit-box-orient")}} 属性设置成 <code>vertical</code>时才有效果</p>
它只有在 {{cssxref("display")}} 属性设置成 `-webkit-box` 或者 `-webkit-inline-box` 并且 {{cssxref("-webkit-box-orient")}} 属性设置成 `vertical`时才有效果

<p>在大部分情况下，也需要设置 {{cssxref("overflow")}} 属性为 <code>hidden</code>, 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号 (ellipsis ).</p>
在大部分情况下，也需要设置 {{cssxref("overflow")}} 属性为 `hidden`, 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号 (ellipsis ).

<p>当他应用于锚 (anchor) 元素时，截取动作可以发生在文本中间，而不必在末尾。</p>
当他应用于锚 (anchor) 元素时，截取动作可以发生在文本中间，而不必在末尾。

<div class="blockIndicator note">
<p><strong>注意</strong>: 此属性在 WebKit 中已经实现，但有一些问题。他是旧标准的一种支持。<a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性且避免一些问题。</p>
</div>
> **备注：** 此属性在 WebKit 中已经实现，但有一些问题。他是旧标准的一种支持。[CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性且避免一些问题。
<h2 id="语法">语法</h2>
## 语法

<pre class="brush:css">/* Keyword value */
```css
/* Keyword value */
-webkit-line-clamp: none;

/* &lt;integer&gt; values */
/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
</pre>
```

<dl>
<dt><code>none</code></dt>
<dd>这个值表明内容显示不会被限制。</dd>
<dt>{{cssxref("integer")}}</dt>
<dd>这个值表明内容显示了多少行之后会被限制。必须大于 0.</dd>
</dl>
- `none`
- : 这个值表明内容显示不会被限制。
- {{cssxref("integer")}}
- : 这个值表明内容显示了多少行之后会被限制。必须大于 0.

<h2 id="例子">例子</h2>
## 例子

<h3 id="HTML">HTML</h3>
### HTML

<pre class="brush: html">&lt;p&gt;
In this example the &lt;code&gt;-webkit-line-clamp&lt;/code&gt; property is set to &lt;code&gt;3&lt;/code&gt;, which means the text is clamped after three lines.
```html
<p>
In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
An ellipsis will be shown at the point where the text is clamped.
&lt;/p&gt;</pre>
</p>
```

<h3 id="CSS">CSS</h3>
### CSS

<pre class="brush: css">p {
```css
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}</pre>
}
```

<h3 id="结果">结果</h3>
### 结果

<p>{{EmbedLiveSample("例子", "100%", "100")}}</p>
{{EmbedLiveSample("例子", "100%", "100")}}

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<p>{{cssinfo}}</p>
{{cssinfo}}

<h2 id="浏览器兼容性">浏览器兼容性</h2>
## 浏览器兼容性

{{Compat("css.properties.-webkit-line-clamp")}}

## See also

<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
<li>{{cssxref("line-clamp")}}</li>
</ul>
- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)
- {{cssxref("line-clamp")}}
31 changes: 15 additions & 16 deletions files/zh-cn/web/css/-webkit-overflow-scrolling/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,31 @@ tags:
- Reference
translation_of: Web/CSS/-webkit-overflow-scrolling
---
<p>{{CSSRef}}{{Non-standard_header}}</p>
{{CSSRef}}{{Non-standard_header}}

<h3 id="概述">概述</h3>
### 概述

<p><strong><code>-webkit-overflow-scrolling</code></strong> 属性控制元素在移动设备上是否使用滚动回弹效果。</p>
**`-webkit-overflow-scrolling`** 属性控制元素在移动设备上是否使用滚动回弹效果。

<h3 id="值">值</h3>
### 值

<dl>
<dt><code>auto</code></dt>
<dd>使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。</dd>
<dt><code>touch</code></dt>
<dd>使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。</dd>
</dl>
- `auto`
- : 使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。
- `touch`
- : 使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

<h3 id="示例">示例</h3>
### 示例

<pre class="brush: css">-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
```css
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
</pre>
```

<h3 id="Browser_Compatibility">规范</h3>
### 规范

<p>尚未有相关规范。另在 Apple 提供的<a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">Safari CSS 参考文档</a>中有所提及。</p>
尚未有相关规范。另在 Apple 提供的[Safari CSS 参考文档](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)中有所提及。

<h3 id="Browser_Compatibility">浏览器兼容性</h3>
### 浏览器兼容性

{{Compat}}
48 changes: 25 additions & 23 deletions files/zh-cn/web/css/-webkit-touch-callout/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,44 @@ title: '-webkit-touch-callout'
slug: Web/CSS/-webkit-touch-callout
translation_of: Web/CSS/-webkit-touch-callout
---
<p>{{CSSRef}} {{Non-standard_header}}</p>
{{CSSRef}} {{Non-standard_header}}

<h2 id="概述">概述</h2>
## 概述

<p><code>-webkit-touch-callout</code> 这个<a href="/en-US/docs/Web/CSS">CSS</a> 属性禁用了默认的 callout 展示， callout 是指当触摸并按住一个元素的时候出现的提示。<br>
<br>
当在 iOS 上一直按住一个目标元素时，Safari 会展示一个关于这个链接的 callout 信息。<code>webkit-touch-callout</code>属性允许禁用掉这一行为。</p>
`-webkit-touch-callout` 这个[CSS](/zh-CN/docs/Web/CSS) 属性禁用了默认的 callout 展示， callout 是指当触摸并按住一个元素的时候出现的提示。

<h2 id="Syntax">语法</h2>
当在 iOS 上一直按住一个目标元素时，Safari 会展示一个关于这个链接的 callout 信息。`webkit-touch-callout`属性允许禁用掉这一行为。

<pre class="twopartsyntaxbox"><a href="/en-US/docs/Web/CSS/CSS_values_syntax">Formal syntax</a>: default | none
</pre>
## 语法

<pre><code class="language-html">-webkit-touch-callout: default</code> /* displays the callout */
<code class="language-html">-webkit-touch-callout: none</code> /* disables the callout */
```
Formal syntax: default | none
```

<code class="language-html">-webkit-touch-callout</code>: initial
```html
-webkit-touch-callout: default /* displays the callout */
-webkit-touch-callout: none /* disables the callout */

-webkit-touch-callout: initial
-webkit-touch-callout: inherit
-webkit-touch-callout: unset</pre>
-webkit-touch-callout: unset
```

<h3 id="可能的值">可能的值</h3>
### 可能的值

<dl>
<dt><code>default</code></dt>
<dd>此值表示显示默认的 callout</dd>
<dt><code>none</code></dt>
<dd>此值表示禁用 callout</dd>
</dl>
- `default`
- : 此值表示显示默认的 callout
- `none`
- : 此值表示禁用 callout

<h2 id="示例">示例</h2>
## 示例

<pre class="brush: css">.example {
```css
.example {
-webkit-touch-callout: none;
}
</pre>
```

<h2 id="Browser_Compatibility">浏览器兼容性</h2>
## 浏览器兼容性

{{Compat("css.properties.-webkit-touch-callout")}}
Loading

0 comments on commit 90ff1a5

Please sign in to comment.