convert to markdown for web/css zh-CN

files/zh-cn/web/css/-moz-outline-radius/index.md

@@ -0,0 +1,94 @@
+---
+title: '-moz-outline-radius'
+slug: Web/CSS/-moz-outline-radius
+tags:
+  - CSS
+  - CSS 属性
+  - CSS：Mozilla 扩展
+  - 非标准
+translation_of: Web/CSS/-moz-outline-radius
+---
+{{CSSRef}}{{Non-standard_Header}}
+
+在包括 Firefox 在内的 Mozilla 的应用里， **`-moz-outline-radius`** [CSS](/zh-CN/docs/Web/CSS) 属性可以用作给一个元素 {{cssxref("outline")}} 圆角。
+
+```css
+/* 一个值 */
+-moz-outline-radius: 25px;
+
+/* 两个值 */
+-moz-outline-radius: 25px 1em;
+
+/* 三个值 */
+-moz-outline-radius: 25px 1em 12%;
+
+/* 四个值 */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* 全局值 */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+```
+
+这个属性是以下四个属性的简写：{{cssxref("-moz-outline-radius-topleft")}}、 {{cssxref("-moz-outline-radius-topright")}}、 {{cssxref("-moz-outline-radius-bottomright")}} 和 {{cssxref("-moz-outline-radius-bottomleft")}}。
+
+{{cssinfo}}
+
+## 语法
+
+### 值
+
+> **备注：** 省略的 outlines 和 `<percentage>` 的值与 {{cssxref("border-radius")}}中描述的语法一致。
+
+一个、两个、三个或四个 `<outline-radius>` 的值，代表着以下数值之一：
+
+- {{cssxref("&lt;length&gt;")}}
+  - : 可能的值请参考 {{cssxref("&lt;length&gt;")}} 。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : 一个 {{cssxref("&lt;percentage&gt;")}}；详情请参考 {{cssxref("border-radius")}} 。
+
+- 如果仅有一个值，这个值应用到全部四个角。
+- 如果设置了两个值，第一个值应用于左上角个右下角，第二个值应用于右上角和左下角。
+- 如果设置了三个值，第一个值应用于左上角，第二个值应用于右上角个左下角，第三个值应用于右下角。
+- 如果设置了四个值，第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。
+
+### 正式语法
+
+{{csssyntax}}
+
+## 示例
+
+### HTML
+
+```html
+<p>This element has a rounded outline!</p>
+```
+
+### CSS
+
+```css
+p {
+  margin: 5px;
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}
+```
+
+### 结果
+
+{{EmbedLiveSample('Example')}}
+
+## 备注
+
+- 直至 Firefox 50 之前，`dotted` 或 `dashed` 圆角被渲染为 solid ，详见 {{bug("382721")}}
+- 未来的 Gecko/Firefox 版本可能完全弃用这个属性。详见 {{bug("593717")}}.
+
+## 规范
+
+这个属性没有在任何 CSS 标准中被定义。
+
+## 浏览器兼容性
+
+{{Compat("css.properties.-moz-outline-radius")}}

files/zh-cn/web/css/-webkit-line-clamp/index.md

@@ -0,0 +1,79 @@
+---
+title: '-webkit-line-clamp'
+slug: Web/CSS/-webkit-line-clamp
+translation_of: Web/CSS/-webkit-line-clamp
+---
+{{CSSRef}}
+
+**`-webkit-line-clamp`** CSS 属性 可以把 {{Glossary("块容器")}} 中的内容限制为指定的行数。
+
+它只有在 {{cssxref("display")}} 属性设置成 `-webkit-box` 或者 `-webkit-inline-box` 并且 {{cssxref("-webkit-box-orient")}} 属性设置成 `vertical`时才有效果
+
+在大部分情况下，也需要设置 {{cssxref("overflow")}} 属性为 `hidden`, 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号 (ellipsis ).
+
+当他应用于锚 (anchor) 元素时，截取动作可以发生在文本中间，而不必在末尾。
+
+> **备注：** 此属性在 WebKit 中已经实现，但有一些问题。他是旧标准的一种支持。[CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性且避免一些问题。
+
+## 语法
+
+```css
+/* Keyword value */
+-webkit-line-clamp: none;
+
+/* <integer> values */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Global values */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+```
+
+- `none`
+  - : 这个值表明内容显示不会被限制。
+- {{cssxref("integer")}}
+  - : 这个值表明内容显示了多少行之后会被限制。必须大于 0.
+
+## 例子
+
+### HTML
+
+```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.
+</p>
+```
+
+### CSS
+
+```css
+p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+```
+
+### 结果
+
+{{EmbedLiveSample("例子", "100%", "100")}}
+
+## 规范
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## 浏览器兼容性
+
+{{Compat("css.properties.-webkit-line-clamp")}}
+
+## See also
+
+- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)
+- {{cssxref("line-clamp")}}