diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-10 08:37:18 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-10 08:37:18 -0500 |
| commit | 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 (patch) | |
| tree | 3d54e994e6b6ff762841fe4c3eb60e87130589a5 /files/zh-cn | |
| parent | a065e04d529da1d847b5062a12c46d916408bf32 (diff) | |
| download | translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.tar.gz translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.tar.bz2 translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.zip | |
dump 2020-12-10
Diffstat (limited to 'files/zh-cn')
13 files changed, 202 insertions, 524 deletions
diff --git a/files/zh-cn/glossary/javascript/index.html b/files/zh-cn/glossary/javascript/index.html index 232e87ec8f..66c98619b4 100644 --- a/files/zh-cn/glossary/javascript/index.html +++ b/files/zh-cn/glossary/javascript/index.html @@ -8,15 +8,15 @@ translation_of: Glossary/JavaScript --- <p>JavaScript (JS) 是一种编程语言，为通常用于客户端（client-side）的网页动态脚本，不过，也常通过像<a href="http://nodejs.org/" rel="external">Node.js</a>这样的包，用于服务器端（{{Glossary("Server","server")}}-side）。</p> -<p>不应该把JavaScript 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">Java</a> 的混淆。“Java” 和 “JavaScript” 都是 Oracle 公司在美国和其他国家注册的商标，但是这两种编程语言在语法、语义和使用方面都明显不同。</p> +<p>不应该把JavaScript 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">Java</a> 混淆。“Java” 和 “JavaScript” 都是 Oracle 公司在美国和其他国家注册的商标，但是这两种编程语言在语法、语义和使用方面都明显不同。</p> -<p>Brendan Eich （彼时受雇于 Netscape ）为服务器端构想的语言，JavaScript ，不久却在 1995 年九月加入 Netscape Navigator 2.0。JavaScript 很快获得了成功，而 <a href='{{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}}'>Internet Explorer 3.0</a> 也在 1996 年八月，引入了对 JavaScript 的支持，冠以 JScript 之名。</p> +<p>Brendan Eich （彼时受雇于 Netscape ）为服务器端构想的语言 JavaScript ，不久便在 1995 年 9 月被加入 Netscape Navigator 2.0。JavaScript 很快获得了成功，而 <a href='{{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}}'>Internet Explorer 3.0</a> 也在 1996 年 8 月，引入了对 JavaScript 的支持，冠以 JScript 之名。</p> -<p>1996 年十一月，Netscape 开始与 ECMA 国际化组织合作以使 JavaScript 成为行业标准。从此以后，标准化的 JavaScript 就被称为 ECMAScript 并规范于 ECMA-262 之下，其最新（第八）版在 2017 年六月生效。</p> +<p>1996 年 11 月，Netscape 开始与 ECMA 国际化组织合作以使 JavaScript 成为行业标准。从此以后，标准化的 JavaScript 就被称为 ECMAScript 并由 ECMA-262 规范，其最新版（第八版）在 2017 年 6 月生效。</p> <p>JavaScript 通常用于浏览器，使开发者能通过{{Glossary("DOM")}}来操纵网页内容、或透过{{Glossary("AJAX")}}与{{Glossary("IndexedDB")}}来操作数据；还可以用它在{{Glossary("canvas")}}上面绘图、通过各种{{Glossary("API","APIs")}}与运行浏览器的各种设备交互……等等。由于近年来的发展、以及各浏览器的{{Glossary("API","APIs")}}性能改善，JavaScript 成了世界上最常用的编程语言之一。</p> -<p>最近，JavaScript 的流行程度 ，由于<a href="http://nodejs.org/">Node.js</a>平台 ——这个除浏览器外最流行的跨平台JavaScript运行环境——的成功，大大提升。Node.js 使开发者可以在 PC 上使用 JavaScript 作为脚本语言使用以自动化处理和构建功能完备的 {{Glossary("HTTP")}} 和 {{Glossary("Web Sockets")}} 服务器。</p> +<p>最近，JavaScript 的流行程度，随着除浏览器外最流行的跨平台 JavaScript 运行环境——<a href="http://nodejs.org/">Node.js</a> 平台的成功而大大提升。Node.js 使开发者可以在 PC 上使用 JavaScript 作为脚本语言以自动化处理和构建功能完备的 {{Glossary("HTTP")}} 和 {{Glossary("Web Sockets")}} 服务器。</p> <h2 id="了解更多">了解更多</h2> @@ -29,7 +29,7 @@ translation_of: Glossary/JavaScript <h3 id="学习JavaScript">学习JavaScript</h3> <ul> - <li>MDN 的 {{Link("/en-US/docs/Web/JavaScript/Guide")}} </li> + <li>MDN 的 {{Link("/zh-CN/docs/Web/JavaScript/Guide")}} </li> <li><a href="http://nodeschool.io/#workshoppers">NodeSchool 的 javascripting 工坊</a></li> <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">codecademy.com 的 JavaScript 课程</a></li> <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig 的 Learning Advanced JavaScript</a></li> diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html index 870ef031ff..81505125b2 100644 --- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html @@ -64,7 +64,7 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS <p>除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它<strong>至少</strong>有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。</p> -<p>I在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p> +<p>在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html index ef7ff27324..7657c460f7 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.html +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -76,7 +76,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>注意：块元素内容的布局方向被描述为<strong>块方向</strong>。块方向在英语等具有水平<strong>书写模式</strong>(<code>writing mode</code>)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的<strong>内联方向</strong>是内联内容（如句子）的运行方向。</p> </div> -<p>当你使用css创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式来搭建页面，而不是自己发明轮子。</p> +<p>当你使用css创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。</p> <p>下列布局技术会覆盖默认的布局行为：</p> diff --git a/files/zh-cn/learn/javascript/异步/async_await/index.html b/files/zh-cn/learn/javascript/异步/async_await/index.html index ae79af9899..739ab63602 100644 --- a/files/zh-cn/learn/javascript/异步/async_await/index.html +++ b/files/zh-cn/learn/javascript/异步/async_await/index.html @@ -323,11 +323,11 @@ timeTest().then(() => { <p>您必须仔细测试您的代码，并在性能开始受损时牢记这一点。</p> -<p>另一个小小的不便是你必须将期待已久的promise封装在异步函数中。</p> +<p>另一个小小的不便是你必须将等待执行的promise封装在异步函数中。</p> <h2 id="Asyncawait_的类方法">Async/await 的类方法</h2> -<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后使用异步方法查看我们的修改版本：</p> +<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后查看使用异步方法的修改版本：</p> <pre class="brush: js notranslate">class Person { constructor(first, last, age, gender, interests) { diff --git a/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html index f11113420e..276d815b85 100644 --- a/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html +++ b/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html @@ -7,7 +7,7 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach <div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div> -<p>为了完成这个模块，我们将简要讨论我们在整个过程中讨论的不同编码技术和功能，看看你应该使用哪一个，并提供适当的常见陷阱的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p> +<p>为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach <h2 id="异步回调">异步回调</h2> -<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的先导;它不那么高效或灵活。仅在必要时使用。</p> +<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。</p> <table class="standard-table"> <caption>Useful for...</caption> @@ -76,7 +76,7 @@ loadAsset('coffee.jpg', 'blob', displayImage);</pre> <ul> <li>嵌套回调可能很麻烦且难以阅读（即“回调地狱”）</li> - <li>每层嵌套都需要调用一次失败回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li> + <li>每层嵌套都需要故障回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li> <li>异步回调不是很优雅。</li> <li>Promise回调总是按照它们放在事件队列中的严格顺序调用;异步回调不是。</li> <li>当传入到一个第三方库时，异步回调对函数如何执行失去完全控制。</li> @@ -137,8 +137,8 @@ setTimeout(function run() { <p>递归<code>setTimeout（）</code>和<code>setInterval（）</code>之间存在差异：</p> <ul> - <li>递归<code>setTimeout（）</code>保证执行之间至少经过指定的时间（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li> - <li>使用<code>setInterval（）</code>，我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 ––然后间隔最终只有60毫秒。</li> + <li>递归<code>setTimeout（）</code>保证两次执行间经过指定的时间量（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li> + <li>使用<code>setInterval（）</code>，我们选择的时间间隔包含了运行代码所花费的时间。（还是100ms为例）假设代码需要40毫秒才能运行 –– 间隔最终只会有60毫秒。</li> </ul> <p>当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的<code>setTimeout（）</code> ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p> @@ -156,7 +156,7 @@ setTimeout(function run() { <h2 id="setInterval">setInterval()</h2> -<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>是一种允许您在每次执行之间以设定的时间间隔重复运行函数的方法。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效，但允许您选择运行速率/帧速率。</p> +<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>函数允许重复执行一个函数，并设置时间间隔。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效率，但允许您选择运行速率/帧速率。</p> <table class="standard-table"> <caption>Useful for...</caption> diff --git a/files/zh-cn/learn/javascript/异步/promises语法/index.html b/files/zh-cn/learn/javascript/异步/promises语法/index.html index a817a71d79..665bda8129 100644 --- a/files/zh-cn/learn/javascript/异步/promises语法/index.html +++ b/files/zh-cn/learn/javascript/异步/promises语法/index.html @@ -188,7 +188,7 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>好的，我们还需要做点额外的工作。Fetch promises 不会产生 404 或 500错误，只有在产生像网路故障的情况时才会不工作。总的来说，Fetch promises 总是成功运行，即使<a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/ok">response.ok</a> 属性是<code> false</code>。为了产生404错误，我们需要判断 <code>response.ok</code> ，如果是 <code>false</code>，抛出错误，否则返回 blob。就像下面的代码这样做。</p> -<pre class="notranslate"><code>let promise2 = promise.then(response => { +<pre class="brush: js notranslate"><code>let promise2 = promise.then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { @@ -204,7 +204,7 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>6. 现在让我们填写执行程序函数的主体。在花括号内添加以下行：</p> -<pre class="notranslate"><code>let objectURL = URL.createObjectURL(myBlob); +<pre class="brush: js notranslate"><code>let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image);</code></pre> @@ -237,8 +237,14 @@ document.body.appendChild(image);</code></pre> <p>这是写出来的一种非常简便的方式;我们故意这样做是为了帮助你清楚地了解发生了什么。如本文前面所示，你可以将<code>.then()</code>块（以及<code>.catch()</code>块）链接在一起。上面的代码也可以这样写(参阅GitHub上的<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">simple-fetch-chained.html</a> ):</p> -<pre class="brush: js notranslate">fetch('coffee.jpg') -.then(response => response.blob()) +<pre class="brush: js notranslate"><code>fetch('coffee.jpg') +.then(response => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } else { + return response.blob(); + } +}) .then(myBlob => { let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); @@ -247,7 +253,7 @@ document.body.appendChild(image);</code></pre> }) .catch(e => { console.log('There has been a problem with your fetch operation: ' + e.message); -});</pre> +});</code></pre> <p>请记住，履行的promise所返回的值将成为传递给下一个 <code>.then()</code> 块的executor函数的参数。</p> @@ -279,9 +285,9 @@ document.body.appendChild(image);</code></pre> ... });</pre> -<p>如果它们都<strong>实现</strong>，那么一个包含所有这些结果的数组将作为<code>.all()</code>的参数传给其链接的<code>.then()</code>块的执行器函数。如果传递给<code>Promise.all()</code>的任何promise都<strong>拒绝</strong>，整个块将<strong>拒绝</strong>。</p> +<p>如果它们都<strong>实现</strong>，那么数组中的结果将作为参数传递给<code>.then()</code>块中的执行器函数。如果传递给<code>Promise.all()</code>的任何一个 promise <strong>拒绝</strong>，整个块将<strong>拒绝</strong>。</p> -<p>这非常有用。想象一下，我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下，接收所有数据然后才显示完整内容，而不是显示部分信息是有意义的。</p> +<p>这非常有用。想象一下，我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下，接收所有数据然后才显示完整内容，而不是显示部分信息。</p> <p>让我们构建另一个示例来展示这一点。</p> @@ -323,11 +329,11 @@ Promise.all([a, b, c]).then(values => { <p>这看起来有点复杂，所以让我们一步一步地完成它：</p> <ol> - <li>首先，我们定义函数，向它传递一个URL和一个表示它正在获取的资源类型的字符串。</li> - <li>在函数体内部，我们有一个类似于我们在第一个例子中看到的结构 - 我们调用<code>fetch()</code>函数来获取指定URL处的资源，然后将其链接到另一个返回解码（或“read”）的promise。 ）响应body。这始终是前一个示例中的<code>blob()</code>方法。</li> + <li>首先，我们定义函数，向它传递一个URL和字符串，这个字符串表示资源类型。</li> + <li>在函数体内部，我们有一个类似于我们在第一个例子中看到的结构 - 我们调用<code>fetch()</code>函数来获取指定URL处的资源，然后将其链接到另一个 promise ，它解码（或“read”）响应body。这是前一个示例中的<code>blob()</code>方法。</li> <li>但是，这里有两处不同： <ul> - <li>首先，我们返回的第二个promise会因类型值的不同而不同。在执行函数内部，我们包含一个简单的<code>if ... else if</code>语句，根据我们需要解码的文件类型返回不同的promise（在这种情况下，我们可以选择<code>blob</code>或<code>text</code>，但这很容易扩展这个以处理其他类型）。</li> + <li>首先，我们返回的第二个promise会因类型值的不同而不同。在执行函数内部，我们包含一个简单的<code>if ... else if</code>语句，根据我们需要解码的文件类型返回不同的promise（在这种情况下，我们可以选择<code>blob</code>或<code>text</code>，而且很容易扩展这个以处理其他类型）。</li> <li>其次，我们在<code>fetch()</code>调用之前添加了<code>return</code>关键字。它的作用是运行整个链，然后运行最终结果（即<code>blob()</code>或<code>text()</code>返回的promise作为我们刚刚定义的函数的返回值）。实际上，<code>return</code>语句将结果从链返回到顶部。</li> </ul> </li> @@ -352,7 +358,7 @@ let description = fetchAndDecode('description.txt', 'text');</pre> });</pre> - <p>你可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为<strong>resolved</strong>时才会运行;当发生这种情况时，它将传递一个数组，其中包含来自各个promise（即解码的响应主体）的结果，类似于 [coffee-results, tea-results, description-results].</p> + <p>你可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为<strong>resolved</strong>时才会运行;当发生这种情况时，它将被传入一个数组，其中包含来自各个promise（即解码的响应主体）的结果，类似于 [coffee-results, tea-results, description-results].</p> </li> <li> <p>最后，在执行程序中添加以下内容。这里我们使用一些相当简单的同步代码将结果存储在单独的变量中（从blob创建对象URL），然后在页面上显示图像和文本。</p> @@ -407,7 +413,7 @@ document.body.appendChild(para);</pre> runFinalCode(); });</pre> -<p>在最近的现代浏览器中，<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下：</p> +<p>在现代浏览器中，<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下：</p> <pre class="brush: js notranslate">myPromise .then(response => { @@ -422,12 +428,16 @@ document.body.appendChild(para);</pre> <p>有关一个真实示例，请查看我们的<a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html">promise-finally.html demo</a>（另请参阅<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html">source code</a>）。这与我们在上面部分中看到的<code>Promise.all()</code>演示完全相同，除了在<code>fetchAndDecode()</code>函数中我们将<code>finally()</code>调用链接到链的末尾：</p> -<pre class="brush: js notranslate">function fetchAndDecode(url, type) { +<pre class="brush: js notranslate"><code>function fetchAndDecode(url, type) { return fetch(url).then(response => { - if(type === 'blob') { - return response.blob(); - } else if(type === 'text') { - return response.text(); + if(!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } else { + if(type === 'blob') { + return response.blob(); + } else if(type === 'text') { + return response.text(); + } } }) .catch(e => { @@ -436,7 +446,7 @@ document.body.appendChild(para);</pre> .finally(() => { console.log(`fetch attempt for "${url}" finished.`); }); -}</pre> +}</code></pre> <p>这会将一条简单的消息记录到控制台，告诉我们每次获取尝试的时间。</p> @@ -454,7 +464,7 @@ document.body.appendChild(para);</pre> <p>可以使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code> 构造函数构建自己的promise。当你需要使用现有的旧项目代码、库或框架以及基于现代promise的代码时，这会派上用场。比如，当你遇到没有使用promise的旧式异步API的代码时，你可以用promise来重构这段异步代码。</p> -<p>让我们看一个简单的示例来帮助你入门 —— 这里我们使用promise包装一个<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>调用 - 它会在两秒后运行一个函数，该函数将用字符串“Success!”，解析当前promise（调用链接的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code>），。</p> +<p>让我们看一个简单的示例来帮助你入门 —— 这里我们用 promise 包装一了个<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a>，</code>它会在两秒后运行一个函数，该函数将用字符串“Success!”，解析当前promise（调用链接的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code>）。</p> <pre class="brush: js notranslate">let timeoutPromise = new Promise((resolve, reject) => { setTimeout(function(){ @@ -462,7 +472,7 @@ document.body.appendChild(para);</pre> }, 2000); });</pre> -<p><code>resolve()</code>和<code>reject()</code>是用来<strong>实现</strong>和<strong>拒绝</strong>新创建的promise的函数。此处，promise<strong>实现</strong>了字符串“Success!”。</p> +<p><code>resolve()</code>和<code>reject()</code>是用来<strong>实现</strong>和<strong>拒绝</strong>新创建的promise的函数。此处，promise 成功运行通过显示字符串“Success!”。</p> <p>因此，当你调用此promise时，可以将<code>.then()</code>块链接到它的末尾，它将传递给<code>.then()</code>块一串“Success!”。在下面的代码中，我们显示出该消息：</p> @@ -534,7 +544,7 @@ document.body.appendChild(para);</pre> <h3 id="一个更真实的例子">一个更真实的例子</h3> -<p>上面的例子是故意做得简单，以使概念易于理解，但它并不是实际上完全同步。异步性质基本上是使用<code>setTimeout()</code>伪造的，尽管它仍然表明promises对于创建具有合理的操作流程，良好的错误处理等的自定义函数很有用</p> +<p>上面的例子是故意做得简单，以使概念易于理解，但它并不是实际上完全异步。异步性质基本上是使用<code>setTimeout()</code>伪造的，尽管它仍然表明promises对于创建具有合理的操作流程，良好的错误处理等的自定义函数很有用</p> <p>我们想邀请你学习的一个例子是<a href="https://github.com/jakearchibald/idb/">Jake Archibald's idb library</a>，它真正地显示了<code>Promise()</code>构造函数的有用异步应用程序。这采用了 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>，它是一种旧式的基于回调的API，用于在客户端存储和检索数据，并允许你将其与promises一起使用。如果你查看<a href="https://github.com/jakearchibald/idb/blob/master/lib/idb.js">main library file</a>，你将看到我们在上面讨论过的相同类型的技术。以下块将许多IndexedDB方法使用的基本请求模型转换为使用promise：</p> diff --git a/files/zh-cn/learn/javascript/异步/简介/index.html b/files/zh-cn/learn/javascript/异步/简介/index.html index c218d064ca..1792c0e086 100644 --- a/files/zh-cn/learn/javascript/异步/简介/index.html +++ b/files/zh-cn/learn/javascript/异步/简介/index.html @@ -229,7 +229,7 @@ console.log("all done");</pre> <p>要查看实际情况，请尝试获取<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">示例</a>的本地副本，并将第三个<code>console.log()</code>调用更改为以下命令：</p> -<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre> +<pre class="brush: js notranslate">console.log ('All done! ' + image.src + 'displayed.');</pre> <p>此时控制台将会报错，而不会显示第三个 <code>console.log</code> 的信息：</p> diff --git a/files/zh-cn/web/api/eventtarget/attachevent/index.html b/files/zh-cn/web/api/eventtarget/attachevent/index.html index 3ddf224034..41ce03185b 100644 --- a/files/zh-cn/web/api/eventtarget/attachevent/index.html +++ b/files/zh-cn/web/api/eventtarget/attachevent/index.html @@ -1,96 +1,8 @@ --- title: 为这个EventTarget附加事件. slug: Web/API/EventTarget/attachEvent +tags: + - Junk translation_of: Web/API/EventTarget/addEventListener --- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="摘要">摘要</h2> - -<p>这是早期IE浏览器（IE8及早期版本）的一个专有的替代性标准，替代EventTarget.addEventListener()方法，{{domxref("EventTarget.addEventListener()")}} 方法</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>) - -</pre> - -<dl> - <dt> 作用的元素（target）</dt> - <dd>一个用于监听事件的文档对象模型元素</dd> - <dt>事件名伴随On（eventNameWithOn）</dt> - <dd>监听的事件名以on前置，类似一个属性的管理者，譬如当你使用onclick时能够监听你的click事件</dd> - <dt>回调函数</dt> - <dd>当目标触发事件时回调函数被调用。这个函数被调用时不带参数，并且这些都将设置在<a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a>这个对象中</dd> - <dt>附加</dt> - <dt> 是否成功附加上属性会以布尔值表示</dt> -</dl> - -<h2 id="规范">规范</h2> - -<p>不存在于任何标准规范中</p> - -<p>微软在MSDN有详细描述 <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">has a description on MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器是否合适</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 thru 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>attachEvent()</code> 不再被IE11支持。</p> - -<p>{{domxref("EventTarget.addEventListener()")}}被IE9+支持.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("EventTarget.detachEvent()")}}</li> - <li>{{domxref("EventTarget.fireEvent()")}}</li> -</ul> +<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/zh-cn/web/api/idbkeyrange/index.html b/files/zh-cn/web/api/idbkeyrange/index.html index 32481c3a02..af65cfbb11 100644 --- a/files/zh-cn/web/api/idbkeyrange/index.html +++ b/files/zh-cn/web/api/idbkeyrange/index.html @@ -16,10 +16,10 @@ translation_of: Web/API/IDBKeyRange <p>{{APIRef("IndexedDB")}}</p> <div> -<p>The <strong><code>IDBKeyRange</code></strong> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> represents a continuous interval over some data type that is used for keys. Records can be retrieved from {{domxref("IDBObjectStore")}} and {{domxref("IDBIndex")}} objects using keys or a range of keys. You can limit the range using lower and upper bounds. For example, you can iterate over all values of a key in the value range A–Z.</p> +<p><a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> 的<strong><code>IDBKeyRange</code></strong>接口表示一些数据类型上的键的连续间隔。可以使用一个键或某个范围的键从{{domxref("IDBObjectStore")}} 和{{domxref("IDBIndex")}} 对象中检索记录。您也可以指定键的上界和下界来限制范围。例如，您可以遍历值范围a - z中的键的所有值。</p> </div> -<p>A key range can be a single value or a range with upper and lower bounds or endpoints. If the key range has both upper and lower bounds, then it is <em>bounded</em>; if it has no bounds, it is <em>unbounded</em>. A bounded key range can either be open (the endpoints are excluded) or closed (the endpoints are included). To retrieve all keys within a certain range, you can use the following code constructs:</p> +<p>键范围可以是单个值，也可以是具有上界、下界或端点的范围。如果键范围同时有上界或下界，那么它是有界的，否则是无界的。有界键范围可以是开放的（不包含端点）或闭合的（包含了端点）。要检索一定范围内的所有键值，可以使用以下的代码结构：</p> <table class="standard-table"> <thead> @@ -66,21 +66,21 @@ translation_of: Web/API/IDBKeyRange </thead> </table> -<p>A key is in a key range if the following conditions are true:</p> +<p>如果以下条件为true，则键包含在键范围中:</p> <ul> - <li>The lower value of the key range is one of the following: + <li>键范围的下界值为以下值或符合以下条件之一时: <ul> <li><code>undefined</code></li> - <li>Less than key value</li> - <li>Equal to key value if <code>lowerOpen</code> is <code>false</code>.</li> + <li>低于正在被鉴定的键值</li> + <li>等于正在被鉴定的键值，且键范围的<code>lowerOpen属性</code>为<code>false</code>.</li> </ul> </li> - <li>The upper value of the key range is one of the following: + <li>键范围的上界值为以下值或符合以下条件之一时: <ul> <li><code>undefined</code></li> - <li>Greater than key value</li> - <li>Equal to key value if <code>upperOpen</code> is <code>false</code>.</li> + <li>高于正在被鉴定的键值</li> + <li>等于正在被鉴定的键值，且键范围的<code>upperOpen<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">属性为</span></font></code><code>false</code>.</li> </ul> </li> </ul> @@ -91,13 +91,13 @@ translation_of: Web/API/IDBKeyRange <dl> <dt>{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}</dt> - <dd>Lower bound of the key range.</dd> + <dd>键范围的下界</dd> <dt>{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}</dt> - <dd>Upper bound of the key range.</dd> + <dd>键范围的上界</dd> <dt>{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}</dt> - <dd>Returns false if the lower-bound value is included in the key range.</dd> + <dd>如果下界值包含在键范围内，则返回false。</dd> <dt>{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}</dt> - <dd>Returns false if the upper-bound value is included in the key range.</dd> + <dd>如果上界值包含在键范围内，则返回false。</dd> </dl> <h2 id="Methods">Methods</h2> @@ -106,31 +106,31 @@ translation_of: Web/API/IDBKeyRange <dl> <dt>{{domxref("IDBKeyRange.bound()")}}</dt> - <dd>Creates a new key range with upper and lower bounds.</dd> + <dd>指定上界和下界来创建一个新的键范围</dd> <dt>{{domxref("IDBKeyRange.only()")}}</dt> - <dd>Creates a new key range containing a single value.</dd> + <dd>指定单个键值来创建一个新的键范围</dd> <dt>{{domxref("IDBKeyRange.lowerBound()")}}</dt> - <dd>Creates a new key range with only a lower bound.</dd> + <dd>指定结果集的下界来创建一个新的键范围</dd> <dt>{{domxref("IDBKeyRange.upperBound()")}}</dt> - <dd>Creates a new upper-bound key range.</dd> + <dd>指定结果集的上界来创建一个新的键范围</dd> </dl> <h3 id="Instance_methods">Instance methods</h3> <dl> <dt>{{domxref("IDBKeyRange.includes()")}}</dt> - <dd>Returns a boolean indicating whether a specified key is inside the key range.</dd> + <dd>返回一个布尔值来表示指定的键是否在键范围内。</dd> </dl> <h2 id="Examples">Examples</h2> -<p>The following example illustrates how you'd use a key range. Here we declare a <code>keyRangeValue</code> as a range between values of "A" and "F". We open a transaction (using {{domxref("IDBTransaction")}}) and an object store, and open a Cursor with {{domxref("IDBObjectStore.openCursor")}}, declaring <code>keyRangeValue</code> as its optional key range value. This means that the cursor will only retrieve records with keys inside that range. This range includes the values "A" and "F", as we haven't declared that they should be open bounds. If we used <span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">IDBKeyRange.bound("A", "F", true, true);</span>, then the range would not include "A" and "F", only the values between them.</p> +<p>以下示例用以说明该如果使用键范围。在此我们将 <code>keyRangeValue</code> 声明为A～F之间的范围。我们打开一个事务 (使用 {{domxref("IDBTransaction")}}) 和一个对象存储, 并用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标，其中<code>keyRangeValue</code>是一个可选的键范围值，指定之后游标将只检索键在该范围内的记录。这里的键范围包括了“A”和“F”，因为我们还没声明键范围为开放边界。如果我们使用 <span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;"><code>IDBKeyRange.bound("A", "F", true, true);</code>，那么这个键范围将不包括</span>“A”和“F”，只包含它们之间的值。</p> <div class="note"> <p><strong>Note</strong>: For a more complete example allowing you to experiment with key range, have a look at our <a href="https://github.com/mdn/indexeddb-examples/tree/master/idbkeyrange">IDBKeyRange-example</a> repo (<a href="https://mdn.github.io/indexeddb-examples/idbkeyrange/">view the example live too</a>.)</p> </div> -<pre class="brush: js">function displayData() { +<pre class="brush: js notranslate">function displayData() { var keyRangeValue = IDBKeyRange.bound("A", "F"); var transaction = db.transaction(['fThings'], 'readonly'); diff --git a/files/zh-cn/web/api/window/scrollto/index.html b/files/zh-cn/web/api/window/scrollto/index.html index 715e3f0190..83cc7657aa 100644 --- a/files/zh-cn/web/api/window/scrollto/index.html +++ b/files/zh-cn/web/api/window/scrollto/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Window/scrollTo <h2 id="Syntax" name="Syntax">语法</h2> -<pre><code>window.scrollTo(x<em>-coord</em>,<em>y-coord</em> )</code> +<pre class="notranslate"><code>window.scrollTo(x<em>-coord</em>,<em>y-coord</em> )</code> <code>window.scrollTo(options)</code></pre> @@ -26,7 +26,7 @@ translation_of: Web/API/Window/scrollTo <ol> <li><code><em>top</em></code> 等同于 <code><em>y-coord</em></code></li> <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">left</span></font> 等同于 <code>x<em>-coord</em></code></li> - <li><code><em>behavior</em></code><em> 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant</em></li> + <li><code><em>behavior</em></code><em> 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto</em></li> </ol> <dl> @@ -34,7 +34,7 @@ translation_of: Web/API/Window/scrollTo <h2 id="Example" name="Example">例子</h2> -<pre>window.scrollTo( 0, 1000 ); +<pre class="notranslate">window.scrollTo( 0, 1000 ); <code>// 设置滚动行为改为平滑的滚动 window.scrollTo({ diff --git a/files/zh-cn/web/css/filter/index.html b/files/zh-cn/web/css/filter/index.html index 0bb84948cb..4b8ab9fcdb 100644 --- a/files/zh-cn/web/css/filter/index.html +++ b/files/zh-cn/web/css/filter/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/filter --- <p>{{CSSRef}}</p> -<p><strong><code>filter </code></strong><span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p> +<p><strong><code>filter</code> </strong><span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p> -<p>CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG<span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜</span>，通过一个URL链接到SVG<span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素</span>(<a href="/en-US/docs/Web/SVG/Element/filter" style="line-height: 1.5;" title="/en/SVG/Element/filter">SVG filter element</a>)。</p> +<p>CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG <span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜</span>，通过一个 URL 链接到 SVG <span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素</span>(<a href="/en-US/docs/Web/SVG/Element/filter" style="line-height: 1.5;" title="/en/SVG/Element/filter">SVG filter element</a>)。</p> <div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/CSS/filter <h2 id="语法">语法</h2> -<pre class="brush:css no-line-numbers">/* URL to SVG filter */ +<pre class="brush:css no-line-numbers notranslate">/* URL to SVG filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ @@ -38,247 +38,84 @@ filter: sepia(60%); /* Multiple filters */ filter: contrast(175%) brightness(3%); +/* Use no filter */ +filter: none; + /* Global values */ filter: inherit; filter: initial; -filter: unset; -</pre> +filter: unset;</pre> <p>设置一种函数，方法如下：</p> -<pre>filter: <filter-function> [<filter-function>]* | none +<pre class="notranslate">filter: <filter-function> [<filter-function>]* | none </pre> -<p>给SVG元素 {{ SVGElement("filter") }}引用滤镜, 如下：</p> +<p>给SVG元素 {{SVGElement("filter")}} 引用滤镜, 如下：</p> -<pre class="eval">filter: url(svg-url#element-id) -</pre> +<pre class="notranslate">filter: url(file.svg#filter-element-id)</pre> <h3 id="插值">插值</h3> -<p>如果起始和结束过滤器都有一个不含{{cssxref("<url>")}}的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是<code>none</code>则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。</p> - -<h3 id="形式语法">形式语法</h3> - -<pre>{{csssyntax}}</pre> - -<h2 id="实例">实例</h2> - -<p>下面的例子是使用预设的滤镜函数。每个函数都有特定的例子.</p> - -<pre class="brush: css">.mydiv { filter: grayscale(50%) } - -/* gray all images by 50% and blur by 10px */ -img { - filter: grayscale(0.5) blur(10px); -}</pre> - -<p>下面的例子展示：通过url函数引入一个svg资源.</p> - -<pre class="brush: css">.target { filter: url(#c1); } - -.mydiv { filter: url(commonfilters.xml#large-blur) } -</pre> +<p>如果起始和结束过滤器都有一个不含 {{cssxref("<url>")}} 的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是<code>none</code>则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。</p> <h2 id="函数">函数</h2> -<p>使用CSS滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回“none“。除特殊说明外，函数的值如果接受百分比值（如34%），那么该函数也接受小数值（如0.34）。</p> +<p>使用 CSS 滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回 <code>none</code>。除特殊说明外，函数的值如果接受百分比值（如 <code>34%</code>），那么该函数也接受小数值（如0.34）。</p> -<h3 id="url()"><code>url()</code></h3> +<p>当单个 <code>filter</code> 属性具有两个或多个函数时，其结果将与将两个或多个 <code>filter</code> 属性分别应用于相同的函数时的结果不同</p> -<p>URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.</p> +<h3 id="SVG_filter">SVG filter</h3> -<pre class="brush: css">filter: url(resources.svg#c1) -</pre> +<h4 id="url">url()</h4> -<h3 id="blur()"><code>blur()</code></h3> +<p>获取指向SVG过滤器的URI，该 <a href="/zh-CN/docs/Web/SVG/Element/filter">SVG filter</a> 可以嵌入到外部XML文件中。</p> -<p><code>给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</code></p> +<pre class="brush: css notranslate">filter: url(resources.svg#c1)</pre> -<pre class="brush: css">filter: blur(5px) -</pre> +<h3 id="Filter_函数">Filter 函数</h3> -<div id="blur_example" style="display: none;"> -<pre class="brush: html"> <table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > - <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> - </filter> - <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table></pre> +<h4 id="blur">blur()</h4> -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:blur(5px); - -webkit-filter:blur(5px); - -o-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} +<p>{{cssxref("filter-function/blur", "blur()")}} 函数将高斯模糊应用于输入图像。<code>radius</code> 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为<code>0</code>。该参数可以指定为 CSS 长度，但不接受百分比值。</p> + +<pre class="brush: css notranslate">filter: blur(5px) </pre> -</div> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </svg></pre> -<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> +<p>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</p> -<h3 id="brightness()"><code>brightness()</code></h3> +<h4 id="brightness">brightness()</h4> -<p>给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</p> +<p>{{cssxref("filter-function/brightness", "brightness()")}} 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 <code>0％</code> 将创建全黑图像。值为 <code>100％</code> 会使输入保持不变。其他值是效果的线性乘数。如果值大于 <code>100%</code> 提供更明亮的结果。若没有设置值，默认为 <code>1</code>。</p> -<pre class="brush: css">filter: brightness(0.5)</pre> +<pre class="brush: css notranslate">filter: brightness(2)</pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> </feComponentTransfer> </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="2"/> - <feFuncG type="linear" slope="2"/> - <feFuncB type="linear" slope="2"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> +<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p> -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -o-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height:100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> +<h4 id="contrast">contrast()</h4> -<h3 id="contrast()"><code>contrast()</code></h3> +<p>{{cssxref("filter-function/contrast", "contrast()")}} 函数可调整输入图像的对比度。值是 <code>0%</code> 的话，图像会全黑。值是 <code>100%</code>，图像不变。值可以超过 <code>100%</code>，意味着会运用更低的对比。若没有设置值，默认是 <code>1</code>。</p> -<p>调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</p> - -<pre class="brush: css">filter: contrast(200%) +<pre class="brush: css notranslate">filter: contrast(200%) </pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="contrast"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> @@ -290,7 +127,7 @@ table.standard-table td { </pre> <div id="contrast_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -319,7 +156,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -365,28 +202,25 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> +<p>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</p> -<h3 id="drop-shadow()"><code>drop-shadow()</code></h3> +<h4 id="drop-shadow">drop-shadow()</h4> -<p>给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<code><shadow>（</code>在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的<code>box-shadow</code> {{cssxref("box-shadow")}}属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下：</p> +<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 函数接受<code><shadow></code>（在CSS3背景中定义）类型的值，除了 <code>inset</code> 和 <code>spread</code> 关键字。该函数与已有的 {{cssxref("box-shadow")}} 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code><shadow></code> 参数如下：</p> <dl> <dt><code><offset-x></code> <code><offset-y></code> <small>(必须)</small></dt> - <dd>这是设置阴影偏移量的两个 {{cssxref("<length>")}}值. <code><offset-x></code> 设定水平方向距离. 负值会使阴影出现在元素左边. <code><offset-y></code>设定垂直距离.负值会使阴影出现在元素上方。.查看 {{cssxref("<length>")}}可能的单位.<br> - <code><font face="Open Sans, sans-serif">如果两个值都是</font>0</code>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><blur-radius></code><span style="line-height: 1.5;"> and/or </span><code style="font-style: normal; line-height: 1.5;"><spread-radius>，</code><span style="line-height: 1.5;">会有模糊效果</span><span style="line-height: 1.5;">).</span></dd> + <dd>这是设置阴影偏移量的两个 {{cssxref("<length>")}} 值。 <code><offset-x></code> 设定水平方向距离，负值会使阴影出现在元素左边。 <code><offset-y></code>设定垂直距离，负值会使阴影出现在元素上方。查看 {{cssxref("<length>")}} 了解可能的单位.<br> + <font face="Open Sans, sans-serif">如果两个值都是 </font><code>0</code>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><blur-radius></code><span style="line-height: 1.5;"> 且/或 </span><code><spread-radius></code> 也<span style="line-height: 1.5;">会有模糊效果</span><span style="line-height: 1.5;">).</span></dd> <dt><code><blur-radius></code> <small>(可选)</small></dt> - <dd>这是第三个 {{cssxref("<length>")}}值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).</dd> - <dt><code><spread-radius></code> <small>(可选)</small></dt> - <dd>这是第四个 {{cssxref("<length>")}} 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). <br> - 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。</dd> + <dd>这是第三个 {{cssxref("<length>")}} 值。值越大，越模糊，所以阴影可以变得更大或更淡。不允许负值。若未设定，默认是 <code>0</code> (则阴影的边界很锐利)。</dd> <dt><code><color></code> <small>(可选)</small></dt> - <dd>查看 {{cssxref("<color>")}}该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用 {{ cssxref("color") }}属性的值。另外，如果颜色值省略，WebKit中阴影是透明的。</dd> + <dd>查看 {{cssxref("<color>")}} 了解该值可能的关键字和标记。若未设定，颜色值基于浏览器 —— 通常是 {{cssxref("<color>")}} 属性的值，但请注意，在这种情况下，Safari 当前会绘制透明阴影。<s>在 Gecko (Firefox), Presto (Opera) 和 Trident (Internet Explorer) 中， 会应用 {{cssxref("<color>")}} 属性的值。另外，如果颜色值省略，WebKit 中阴影是透明的。</s></dd> </dl> -<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> +<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> @@ -397,129 +231,18 @@ table.standard-table td { <feMergeNode in="SourceGraphic"/> </feMerge> </filter> -</svg> -</pre> - -<div id="shadow_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> - <feOffset dx="16" dy="16"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> - <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> -</svg><div></td> - <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> - </tr> - <tr> - <td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"> - <filter id="drop-shadow2"> - <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> - <feOffset dx="8" dy="10"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> - <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> - </svg> - <div> - </td> - <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -o-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: ; -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3, #img13 { - height:100%; -} -</pre> -</div> +</svg></pre> -<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> +<p>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</p> -<h3 id="grayscale()"><code>grayscale()</code></h3> +<h4 id="grayscale">grayscale()</h4> -<p>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> +<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 函数将改变输入图像灰度。<code>amount</code> 的值定义了转换的比例。值为 <code>100%</code> 则完全转为灰度图像，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，则是效果的线性乘数。若未设置值，默认是 <code>0</code>。</p> -<pre class="brush: css">filter: grayscale(100%)</pre> +<pre class="brush: css notranslate">filter: grayscale(100%)</pre> <div id="grayscale_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -548,7 +271,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -594,16 +317,22 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</p> -<h3 id="hue-rotate()"><code>hue-rotate()</code></h3> +<h4 id="hue-rotate">hue-rotate()</h4> -<p>给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p> +<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 函数在输入图像上应用色相旋转。<code>angle</code> 一值设定图像会被调整的色环角度值。值为 <code>0deg</code>，则图像无变化。若值未设置值，默认为 <code>0deg</code>。该值虽然没有最大值，超过 <code>360deg</code> 的值相当于又绕一圈。</p> -<pre class="brush: css">filter: hue-rotate(90deg)</pre> +<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate" > + <feColorMatrix type="hueRotate" values="[angle]" /> + <filter /> +</svg></pre> <div id="huerotate_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -629,7 +358,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -675,16 +404,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> +<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p> -<h3 id="invert()"><code>invert()</code></h3> +<h4 id="invert">invert()</h4> -<p>反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p> +<p>{{cssxref("filter-function/invert", "invert()")}} 函数反转输入图像。<code>amount</code> 的值定义转换的比例。<code>100%</code> 的价值是完全反转。值为 <code>0%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。 若值未设置值，默认为 <code>0</code>。</p> -<pre class="brush: css">filter: invert(100%)</pre> +<pre class="brush: css notranslate">filter: invert(100%)</pre> <div id="invert_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -713,7 +442,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -759,16 +488,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> +<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p> -<h3 id="opacity()"><code>opacity()</code></h3> +<h4 id="opacity">opacity()</h4> -<p>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p> +<p>{{cssxref("filter-function/opacity", "opacity()")}} 转化图像的透明程度。<code>amount</code> 的值定义转换的比例。值为 <code>0%</code> 则是完全透明，值为 <code>100%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。也相当于图像样本乘以数量。 若值未设置，值默认是<code>1</code>。该函数与已有的 <code>opacity</code> 属性很相似，不同之处在于通过 <code>filter</code>，一些浏览器为了提升性能会提供硬件加速。</p> -<pre class="brush: css">filter: opacity(50%)</pre> +<pre class="brush: css notranslate">filter: opacity(50%)</pre> <div id="opacity_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -795,7 +524,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -841,16 +570,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> +<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p> -<h3 id="saturate()"><code>saturate()</code></h3> +<h4 id="saturate">saturate()</h4> -<p>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p> +<p>{{cssxref("filter-function/saturate", "saturate()")}} 函数转换图像饱和度。<code>amount</code> 的值定义转换的比例。值为 <code>0%</code> 则是完全不饱和，值为 <code>100%</code> 则图像无变化。其他值是效果的线性乘数。超过 <code>100%</code> 则有更高的饱和度。 若未设置值，默认为 <code>1</code>。</p> -<pre class="brush: css">filter: saturate(200%)</pre> +<pre class="brush: css notranslate">filter: saturate(200%)</pre> <div id="saturate_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -876,7 +605,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -922,16 +651,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> +<p>{{EmbedLiveSample('saturate_example','100%','332px','','', 'no-codepen')}}</p> -<h3 id="sepia()"><code>sepia()</code></h3> +<h4 id="sepia">sepia()</h4> -<p>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> +<p> {{cssxref("filter-function/sepia", "sepia()")}} 函数将图像转换为深褐色。<code>amount</code> 的值定义转换的比例。值为 <code>100%</code> 则完全是深褐色的，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，值是效果的线性乘数。若未设置，值默认是 <code>0</code>。</p> -<pre class="brush: css">filter: sepia(100%)</pre> +<pre class="brush: css notranslate">filter: sepia(100%)</pre> <div id="sepia_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -960,7 +689,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -1006,16 +735,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> +<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p> <h2 id="复合函数">复合函数</h2> <p>你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。</p> -<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre> +<pre class="brush: css notranslate">filter: contrast(175%) brightness(3%)</pre> <div id="combination_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -1033,7 +762,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -1080,7 +809,37 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</p> + +<h2 id="正式定义">正式定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="形式语法">形式语法</h2> + +<pre dir="rtl">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="应用_filter_功能">应用 filter 功能</h3> + +<p>下面显示了使用预定义功能的示例。有关特定示例，请参见每个功能。</p> + +<pre class="brush: css notranslate">.mydiv { filter: grayscale(50%) } + +/* gray all images by 50% and blur by 10px */ +img { + filter: grayscale(0.5) blur(10px); +}</pre> + +<h3 id="应用_SVG_filter">应用 SVG filter</h3> + +<p>将 URL 函数与 SVG 资源一起使用的示例如下：</p> + +<pre class="brush: css notranslate">.target { filter: url(#c1); } + +.mydiv { filter: url(commonfilters.xml#large-blur) } +</pre> <h2 id="规范">规范</h2> @@ -1101,8 +860,6 @@ table.standard-table td { </tbody> </table> -<p>{{cssinfo}}</p> - <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> <p>{{Compat("css.properties.filter")}}</p> diff --git a/files/zh-cn/web/guide/css/block_formatting_context/index.html b/files/zh-cn/web/guide/css/block_formatting_context/index.html index 04ccc3bedb..740c8186d5 100644 --- a/files/zh-cn/web/guide/css/block_formatting_context/index.html +++ b/files/zh-cn/web/guide/css/block_formatting_context/index.html @@ -22,7 +22,7 @@ translation_of: Web/Guide/CSS/Block_formatting_context <li>表格单元格（元素的 {{ cssxref("display") }} 为 <code>table-cell</code>，HTML表格单元格默认为该值）</li> <li>表格标题（元素的 {{ cssxref("display") }} 为 <code>table-caption</code>，HTML表格标题默认为该值）</li> <li>匿名表格单元格元素（元素的 {{ cssxref("display") }} 为 <code>table<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-row</code>、 <code>table-row-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-header-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-footer-group</code>（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 <code>inline-table</code>）</li> - <li>{{ cssxref("overflow") }} 值不为 <code>visible</code> 的块元素</li> + <li>{{ cssxref("overflow") }} 计算值(Computed)不为 <code>visible</code> 的块元素</li> <li>{{ cssxref("display") }} 值为 <code><a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code> 的元素</li> <li>{{ cssxref("contain") }} 值为 <code>layout</code>、<code>content </code>或 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">paint</span></font> 的元素</li> <li>弹性元素（{{ cssxref("display") }} 为 <code>flex</code> 或 <code>inline-flex </code>元素的直接子元素）</li> diff --git a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html index b7e809269d..256961d4e6 100644 --- a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html +++ b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html @@ -594,10 +594,9 @@ for (var i = 0, j = 9; i <= j; i++, j--) <h4 id="delete" name="delete"><code>delete</code></h4> -<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>操作符，删除一个对象或一个对象的属性或者一个数组中某一个键值。语法如下:</p> +<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>操作符，删除一个对象的属性或者一个数组中某一个键值。语法如下:</p> -<pre class="brush: js notranslate">delete objectName; -delete objectName.property; +<pre class="brush: js notranslate">delete objectName.property; delete objectName[index]; delete property; // legal only within a with statement </pre> |