From d490e42ffe823173477b841ec397105bd06cb336 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 17 Jun 2021 13:35:36 -0400 Subject: rid of $samples iframes --- files/zh-cn/web/css/font-variant/index.html | 18 +++++++----------- files/zh-cn/web/css/shape-image-threshold/index.html | 15 +++++++++------ files/zh-cn/web/css/shape-margin/index.html | 19 ++++++++----------- files/zh-cn/web/css/translate/index.html | 12 ++++++------ 4 files changed, 30 insertions(+), 34 deletions(-) (limited to 'files/zh-cn/web/css') 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;
规定与{{cssxref("font-variant-alternates")}}属性相关的关键字，可能的值包括：lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal 和 slashed-zero。
<east-asian-variant-values>, <east-asian-width-values>, ruby
规定与{{cssxref("font-variant-east-asian")}}属性相关的关键字，可能的值包括：jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby。
-
-

正式语法

-
{{csssyntax}}

示例

-

HTML

+

Setting the small-caps font variant

+ +

HTML

<p class="normal">Firefox rocks!</p>
 <p class="small">Firefox rocks!</p>
-

CSS

+

CSS

p.normal {
   font-variant: normal;
@@ -69,9 +68,9 @@ p.small {
 }
-

结果

+

Result

-

+

{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}

规范

@@ -106,11 +105,8 @@ p.small {

浏览器兼容性

-
- +

{{Compat}}

-

{{Compat("css.properties.font-variant")}}

-

参见

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}} -

范例

+

范例

+ +

Aligning text to a gradient

这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。shape-outside也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。

-

HTML

+

HTML

<div id="gradient-shape"></div>
 
@@ -65,7 +67,7 @@ shape-image-threshold: unset;
   deleniti ipsum sequi rem eveniet laboriosam magni expedita?
 </p>
-

CSS

+

CSS

#gradient-shape {
   width: 150px;
@@ -82,9 +84,10 @@ shape-image-threshold: unset;
 
 
随后值为0.2的shape-image-threshold属性规定渐变中不透明度超过20%的像素才参与构成形状。

 
-
Result

+
Result

+
+
{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}

 
-

 
规范

 
 
@@ -109,7 +112,7 @@ shape-image-threshold: unset;
 

 
 
-
{{Compat("css.properties.shape-image-threshold")}}

+
{{Compat}}

 
参见

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;
 
 
范例

 
-
HTML

+
Adding a margin to a polygon

+
+
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>

+of Mars, if one exists, probably knows its truth as we know it.</section>
 
-
CSS

+
CSS
section {
   max-width: 400px;
@@ -77,10 +79,9 @@ of Mars, if he exists, probably knows its truth as we know it.</section>
 
-
Result

-
-

+
Result

 
+
{{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}}

 
规范

 
 

 
 
 
 
 
 

@@ -104,11 +105,7 @@ of Mars, if he exists, probably knows its truth as we know it.</section>浏览器兼容性
 
-

-
-
-
{{Compat("css.properties.shape-margin")}}

-

+
{{Compat}}
参见

 
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}}
 
-
示例

+
示例
HTML

 
-
<div>
+
<div>
   <p class="translate">Translation</p>
 </div>

 
 
CSS

 
-
* {
+
* {
   box-sizing: border-box;
 }
 
@@ -89,9 +89,9 @@ div:hover .translate {
 }
 

 
-
结果

+
Result

 
-

+
{{EmbedLiveSample('Examples')}}

 
 
规范

 
@@ -118,7 +118,7 @@ div:hover .translate {
 
 
 
-
{{Compat("css.properties.translate")}}

+
{{Compat}}

 
 
参见

 
-- 
cgit v1.2.3-54-g00ecf