diff options
Diffstat (limited to 'files/zh-cn/web/css')
| -rw-r--r-- | files/zh-cn/web/css/font-variant/index.html | 18 | ||||
| -rw-r--r-- | files/zh-cn/web/css/shape-image-threshold/index.html | 15 | ||||
| -rw-r--r-- | files/zh-cn/web/css/shape-margin/index.html | 19 | ||||
| -rw-r--r-- | files/zh-cn/web/css/translate/index.html | 12 |
4 files changed, 30 insertions, 34 deletions
diff --git a/files/zh-cn/web/css/font-variant/index.html b/files/zh-cn/web/css/font-variant/index.html index a01120c3c3..f5aae7872a 100644 --- a/files/zh-cn/web/css/font-variant/index.html +++ b/files/zh-cn/web/css/font-variant/index.html @@ -44,22 +44,21 @@ font-variant: unset; <dd>规定与{{cssxref("font-variant-alternates")}}属性相关的关键字，可能的值包括：<code>lining-nums</code>, <code>oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code> 和 <code>slashed-zero</code>。</dd> <dt><code><east-asian-variant-values></code>, <code><east-asian-width-values></code>, <code>ruby</code></dt> <dd>规定与{{cssxref("font-variant-east-asian")}}属性相关的关键字，可能的值包括：<code>jis78</code>, <code>jis83</code>, <code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code>。</dd> - <dt> - <h3 id="正式语法">正式语法</h3> - </dt> </dl> {{csssyntax}} <h2 id="示例">示例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Setting_the_small-caps_font_variant">Setting the small-caps font variant</h3> + +<h4 id="HTML">HTML</h4> <pre class="brush: html"><p class="normal">Firefox rocks!</p> <p class="small">Firefox rocks!</p> </pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">p.normal { font-variant: normal; @@ -69,9 +68,9 @@ p.small { } </pre> -<h3 id="结果">结果</h3> +<h4 id="Result">Result</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/font-variant$samples/Example?revision=1598093"></iframe></p> +<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}</p> <h2 id="规范">规范</h2> @@ -106,11 +105,8 @@ p.small { <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> -<div> - +<p>{{Compat}}</p> -<p>{{Compat("css.properties.font-variant")}}</p> -</div> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/shape-image-threshold/index.html b/files/zh-cn/web/css/shape-image-threshold/index.html index 1f4daae524..923607a5e8 100644 --- a/files/zh-cn/web/css/shape-image-threshold/index.html +++ b/files/zh-cn/web/css/shape-image-threshold/index.html @@ -44,11 +44,13 @@ shape-image-threshold: unset; {{csssyntax}} -<h2 id="范例">范例</h2> +<h2 id="Examples">范例</h2> + +<h3 id="Aligning_text_to_a_gradient">Aligning text to a gradient</h3> <p>这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。<code>shape-outside</code>也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。</p> -<h3 id="HTML">HTML</h3> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><div id="gradient-shape"></div> @@ -65,7 +67,7 @@ shape-image-threshold: unset; deleniti ipsum sequi rem eveniet laboriosam magni expedita? </p></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css; hightlight[9]">#gradient-shape { width: 150px; @@ -82,9 +84,10 @@ shape-image-threshold: unset; <p>随后值为<code>0.2</code>的<code>shape-image-threshold</code>属性规定渐变中不透明度超过20%的像素才参与构成形状。</p> -<h3 id="Result">Result</h3> +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</p> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="230" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/shape-image-threshold$samples/Example?revision=1598826" width="600"></iframe></p> <h2 id="规范">规范</h2> <table class="standard-table"> @@ -109,7 +112,7 @@ shape-image-threshold: unset; <div> -<p>{{Compat("css.properties.shape-image-threshold")}}</p> +<p>{{Compat}}</p> </div> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/shape-margin/index.html b/files/zh-cn/web/css/shape-margin/index.html index 1590690856..afc4a907df 100644 --- a/files/zh-cn/web/css/shape-margin/index.html +++ b/files/zh-cn/web/css/shape-margin/index.html @@ -49,7 +49,9 @@ shape-margin: unset; <h2 id="范例">范例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Adding_a_margin_to_a_polygon">Adding a margin to a polygon</h3> + +<h4 id="HTML">HTML</h4> <pre class="brush: html"><section> <div class="shape"></div> @@ -59,9 +61,9 @@ uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant -of Mars, if he exists, probably knows its truth as we know it.</section></pre> +of Mars, if one exists, probably knows its truth as we know it.</section></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">section { max-width: 400px; @@ -77,10 +79,9 @@ of Mars, if he exists, probably knows its truth as we know it.</section></ shape-margin: 20px; }</pre> -<h3 id="Result">Result</h3> - -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="250" id="frame_Example" src="https://mdn.mozillademos.org/zh-CN/docs/Web/CSS/shape-margin$samples/Example?revision=1608812" width="500"></iframe></p> +<h4 id="Result">Result</h4> +<p>{{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}}</p> <h2 id="规范">规范</h2> <table class="standard-table"> @@ -104,11 +105,7 @@ of Mars, if he exists, probably knows its truth as we know it.</section></ <h2 id="浏览器兼容性">浏览器兼容性</h2> -<div> - - -<p>{{Compat("css.properties.shape-margin")}}</p> -</div> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/css/translate/index.html b/files/zh-cn/web/css/translate/index.html index 117a42ed4f..acfffc7ba9 100644 --- a/files/zh-cn/web/css/translate/index.html +++ b/files/zh-cn/web/css/translate/index.html @@ -48,17 +48,17 @@ translate: 50% 105px 5rem; {{csssyntax}} -<h2 id="示例">示例</h2> +<h2 id="Examples">示例</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="translate">Translation</p> </div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -89,9 +89,9 @@ div:hover .translate { } </pre> -<h3 id="结果">结果</h3> +<h3 id="Result">Result</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/translate$samples/Examples?revision=1595410"></iframe></p> +<p>{{EmbedLiveSample('Examples')}}</p> <h2 id="规范">规范</h2> @@ -118,7 +118,7 @@ div:hover .translate { -<p>{{Compat("css.properties.translate")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> |