diff options
Diffstat (limited to 'files/zh-cn/web')
6 files changed, 155 insertions, 487 deletions
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> |