diff --git a/files/zh-cn/web/css/background-attachment/index.html b/files/zh-cn/web/css/background-attachment/index.html index 675c1fa46eaf50..6111405337036a 100644 --- a/files/zh-cn/web/css/background-attachment/index.html +++ b/files/zh-cn/web/css/background-attachment/index.html @@ -14,7 +14,7 @@
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
- +

语法

@@ -34,9 +34,9 @@

取值

fixed
此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。
local
-
此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
+
此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll
-
此关键属性值表示背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)。
+
此关键属性值表示背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。

标准语法

@@ -48,7 +48,7 @@

例子

简单的例子

-

CSS样式表

+

CSS 样式表

p {
   background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
@@ -56,7 +56,7 @@ 

CSS样式表

}
-

HTML源码

+

HTML 源码

<p>
   There were doors all round the hall, but they were all locked; and when
@@ -73,7 +73,7 @@ 

多背景图支持

此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的<attachment>属性值。每一张背景图片顺序对应相应的 attachment 属性。

-

CSS样式表

+

CSS 样式表

p {
   background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
@@ -81,7 +81,7 @@ 

CSS样式表

background-repeat: no-repeat, repeat-y; }
-

HTML源码

+

HTML 源码

<p>
   There were doors all round the hall, but they were all locked; and when
@@ -108,7 +108,7 @@ 

规 - + @@ -117,7 +117,7 @@

- + diff --git a/files/zh-cn/web/css/background-blend-mode/index.html b/files/zh-cn/web/css/background-blend-mode/index.html index a144b2a337c85a..4cb14fac1c90ee 100644 --- a/files/zh-cn/web/css/background-blend-mode/index.html +++ b/files/zh-cn/web/css/background-blend-mode/index.html @@ -7,9 +7,9 @@

概述

-

background-blend-mode CSS属性定义该元素的背景图片,以及背景色如何混合。

+

background-blend-mode CSS 属性定义该元素的背景图片,以及背景色如何混合。

-

混合模式应该按{{cssxref("background-image")}} CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。

+

混合模式应该按{{cssxref("background-image")}} CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。

{{cssinfo}}

diff --git a/files/zh-cn/web/css/background-clip/index.html b/files/zh-cn/web/css/background-clip/index.html index a5300f547933c5..465befcd8c7046 100644 --- a/files/zh-cn/web/css/background-clip/index.html +++ b/files/zh-cn/web/css/background-clip/index.html @@ -15,7 +15,7 @@
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
- +

如果没有设置背景图片({{cssxref("background-image")}})或背景颜色({{cssxref("background-color")}}),那么这个属性只有在边框( {{cssxref("border")}})被设置为非固实(soild)、透明或半透明时才能看到视觉效果(与 {{cssxref("border-style")}} 或 {{cssxref("border-image")}} 有关),否则,本属性产生的样式变化会被边框覆盖。

diff --git a/files/zh-cn/web/css/background-color/index.html b/files/zh-cn/web/css/background-color/index.html index 215c5da41fe393..3b4487f115ac32 100644 --- a/files/zh-cn/web/css/background-color/index.html +++ b/files/zh-cn/web/css/background-color/index.html @@ -12,7 +12,7 @@

概览

-

CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.

+

CSS属性中的 background-color 会设置元素的背景色,属性的值为颜色值或关键字"transparent"二者选其一。

{{cssinfo}}
diff --git a/files/zh-cn/web/css/background-image/index.html b/files/zh-cn/web/css/background-image/index.html index 04dae1533f6f13..86259329f503c7 100644 --- a/files/zh-cn/web/css/background-image/index.html +++ b/files/zh-cn/web/css/background-image/index.html @@ -14,15 +14,15 @@
{{EmbedInteractiveExample("pages/css/background-image.html")}}
- +

在绘制时,图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

-

然后元素的边框 border 会在它们之上被绘制,而 {{cssxref("background-color")}} 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系,需要在CSS属性{{cssxref("background-clip")}} 和 {{cssxref("background-origin")}} 中定义。

+

然后元素的边框 border 会在它们之上被绘制,而 {{cssxref("background-color")}} 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系,需要在 CSS 属性{{cssxref("background-clip")}} 和 {{cssxref("background-origin")}} 中定义。

如果一个指定的图像无法被绘制 (比如,被指定的 URI 所表示的文件无法被加载),浏览器会将此情况等同于其值被设为 none

-
注意: 即使图像是不透明的,背景色在通常情况下并不会被显示,web开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如,在网络连接断开的情况下—背景色就会被绘制。
+
注意: 即使图像是不透明的,背景色在通常情况下并不会被显示,web 开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如,在网络连接断开的情况下—背景色就会被绘制。

语法

@@ -40,7 +40,7 @@

取值

none
是一个表示无背景图的关键字。
<image>
-
{{cssxref("<image>")}} 用来标记将要显示的图片. 支持多背景设置,背景之间以逗号隔开.
+
{{cssxref("<image>")}} 用来标记将要显示的图片。支持多背景设置,背景之间以逗号隔开。

正规语法

@@ -49,7 +49,7 @@

正规语法

示例

-

注意星星图片部分透明且位于猫图片上方.

+

注意星星图片部分透明且位于猫图片上方。

HTML

@@ -134,15 +134,15 @@

浏览器兼容性

{{Compat("css.properties.background-image")}}
-

[1] 如果 about:config 中 browser.display.use_document_colors  被设置为 false, 背景图像将不会展示.

+

[1] 如果 about:config 中 browser.display.use_document_colors  被设置为 false, 背景图像将不会展示。

-

[2] 当前的iOS Safari 版本 (5.0) CSS 背景属性对SVG的支持并不完善. iOS Safari (5.0)之前的版本亦是如此.

+

[2] 当前的 iOS Safari 版本 (5.0) CSS 背景属性对 SVG 的支持并不完善。iOS Safari (5.0) 之前的版本亦是如此。

参见

  • Implementing image sprites in CSS
  • {{HTMLElement("img")}}
  • -
  • 与图像相关的数据类型: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}
  • -
  • 与图像相关的函数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}
  • +
  • 与图像相关的数据类型:{{cssxref("<image>")}}, {{cssxref("<gradient>")}}
  • +
  • 与图像相关的函数:{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}
diff --git a/files/zh-cn/web/css/background-origin/index.html b/files/zh-cn/web/css/background-origin/index.html index 58c2313616e047..fb91465303d6aa 100644 --- a/files/zh-cn/web/css/background-origin/index.html +++ b/files/zh-cn/web/css/background-origin/index.html @@ -7,11 +7,11 @@

摘要

-

 background-origin 规定了指定背景图片{{cssxref("background-image")}} 属性的原点位置的背景相对区域.

+

 background-origin 规定了指定背景图片{{cssxref("background-image")}} 属性的原点位置的背景相对区域。

-

注意:当使用 {{Cssxref("background-attachment")}} 为fixed时,该属性将被忽略不起作用。

+

注意:当使用 {{Cssxref("background-attachment")}} 为 fixed 时,该属性将被忽略不起作用。

-
假如{{cssxref("background")}}简写中没有设置该值,那么在 background 简写值后指定background-origin,那么后面的值就会覆盖简写值,其实说白了,就是后出现的值会覆盖前面的值。
+
假如{{cssxref("background")}}简写中没有设置该值,那么在 background 简写值后指定 background-origin,那么后面的值就会覆盖简写值,其实说白了,就是后出现的值会覆盖前面的值。

{{cssinfo}}

@@ -30,11 +30,11 @@

属性值

border-box
-
背景图片的摆放以border区域为参考
+
背景图片的摆放以 border 区域为参考
padding-box
-
背景图片的摆放以padding区域为参考
+
背景图片的摆放以 padding 区域为参考
content-box
-
背景图片的摆放以content区域为参考
+
背景图片的摆放以 content 区域为参考

形式化语法

How to read CSS syntax. @@ -50,7 +50,7 @@

例子

padding: 10px; background: url('image.jpg'); background-position: center left; - /* 背景将在内容区padding内部填充 */ + /* 背景将在内容区 padding 内部填充 */ background-origin: content-box; } @@ -95,5 +95,5 @@

浏览器兼容性

相关文献

diff --git a/files/zh-cn/web/css/background-position-y/index.html b/files/zh-cn/web/css/background-position-y/index.html index b99a8aa527d4dc..b4f6b0a7ee44e7 100644 --- a/files/zh-cn/web/css/background-position-y/index.html +++ b/files/zh-cn/web/css/background-position-y/index.html @@ -11,9 +11,9 @@

摘要

-

background-position-y 属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过 {{cssxref("background-origin")}} 定义的背景层的原点进行定位. 需要获得更多的信息可以查看{{cssxref("background-position")}} 属性,这个属性已经得到了长久且广泛的支持.

+

background-position-y 属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过 {{cssxref("background-origin")}} 定义的背景层的原点进行定位。需要获得更多的信息可以查看{{cssxref("background-position")}} 属性,这个属性已经得到了长久且广泛的支持。

-
注意: background-position-y 设定的值会被 {{cssxref("background")}} 或者是 {{cssxref("background-position")}} 的简写属性的background-position-x后面的值所覆盖.
+
注意: background-position-y 设定的值会被 {{cssxref("background")}} 或者是 {{cssxref("background-position")}} 的简写属性的background-position-x后面的值所覆盖。
/* Keyword values */
 background-position-y: top;
@@ -49,15 +49,15 @@ 

合法值

top
-
将背景图片的上边界与背景位置层的上边界对齐.
+
将背景图片的上边界与背景位置层的上边界对齐。
center
-
将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐.
+
将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐。
bottom
-
将背景图片的下边界与背景位置层的下边界对齐.
+
将背景图片的下边界与背景位置层的下边界对齐。
<length>
-
 通过{{cssxref("<length>")}} 直接设定具体的数值,该数值定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移量,默认情况下是padding-box.
+
 通过{{cssxref("<length>")}} 直接设定具体的数值,该数值定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移量,默认情况下是 padding-box.
<percentage>
-
通过{{cssxref("<percentage>")}} 百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高-背景图片的高) * 百分比,高度差和百分比都保留符号,例如(100px - 200px) * (-10%) = 10px那么偏移量就是正的10px(向下为正方向),默认情况下是padding-box.
+
通过{{cssxref("<percentage>")}} 百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高 - 背景图片的高) * 百分比,高度差和百分比都保留符号,例如 (100px - 200px) * (-10%) = 10px 那么偏移量就是正的 10px(向下为正方向),默认情况下是 padding-box.

Formal syntax

diff --git a/files/zh-cn/web/css/background-position/index.md b/files/zh-cn/web/css/background-position/index.md index 9076de3b6f39a9..296f359623d312 100644 --- a/files/zh-cn/web/css/background-position/index.md +++ b/files/zh-cn/web/css/background-position/index.md @@ -67,7 +67,7 @@ background-position: unset; **两个值的语法:** 一个定义 x 坐标,另一个定义 y 坐标。每个值可以是: - 关键字 `top`、`left`、`bottom`、`right` 中的一个。如果这里给出 `left` 或 `right`,那么这个值定义 x 轴位置,另一个值定义 y 轴位置。如果这里给出 `top` 或 `bottom`,那么这个值定义 y 轴位置,另一个值定义 x 轴位置。 - - {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。如果另一个值是 `left` 或 `right`, 则该值定义相对于顶部边界的 Y。如果另一个值是 `top` 或 `bottom`,则该值定义相对于左边界的 X。如果两个值都是 `` 或 `` 值,则第一个定义 X,第二个定义 Y。 + - {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。如果另一个值是 `left` 或 `right`,则该值定义相对于顶部边界的 Y。如果另一个值是 `top` 或 `bottom`,则该值定义相对于左边界的 X。如果两个值都是 `` 或 `` 值,则第一个定义 X,第二个定义 Y。 - 注意:如果一个值是 `top` 或 `bottom`,那么另一个值不可能是 `top` 或 `bottom`。如果一个值是 `left` 或 `right`,那么另一个值不可能是 `left` 或 `right`。也就是说,例如,`top top` 和 `left right` 是无效的。 - 排序:配对关键字时,位置并不重要,因为浏览器可以重新排序,写成 `top left` 或 `left top` 其产生的效果是相同的。使用 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 与关键字配对时顺序非常重要,定义 X 的值放在前面,然后是定义 Y 的值, `right 20px` 和 `20px right` 的效果是不相同的,前者有效但后者无效。`left 20%` 或 `20% bottom` 是有效的,因为 X 和 Y 值已明确定义且位置正确。 - 默认值是 `left top` 或者 `0% 0%`。 @@ -112,8 +112,8 @@ background-position: unset; 因此,对于我们的示例,使用这些结果值,让**图像**的**左边界**从**容器**的**左边界**偏移: -- \+ 50px (将图像左边界放在 100px 宽容器的中心) -- 0px (图像左边界与容器左边界重合) +- \+ 50px(将图像左边界放在 100px 宽容器的中心) +- 0px(图像左边界与容器左边界重合) - \-100px (将图片相对容器左移 100px,这意味着图片中部的 100px 内容将出现在容器中) - \-200px (将图片相对容器左移 200px,这意味着图片右部分的 100px 内容将出现在容器中) - \-250px (将图片相对容器左移 250px,这意味着图片的右边界对齐容器的中线) diff --git a/files/zh-cn/web/css/background-repeat/index.html b/files/zh-cn/web/css/background-repeat/index.html index 3bcb2cbd48fd50..2f072376e9e3b9 100644 --- a/files/zh-cn/web/css/background-repeat/index.html +++ b/files/zh-cn/web/css/background-repeat/index.html @@ -40,7 +40,7 @@

<repeat-style>
-
单值语法是完整的双值语法的简写:
+
单值语法是完整的双值语法的简写:
CSS版本CSS 版本 推荐状态 点评
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}} {{Spec2('CSS3 Backgrounds')}}该简单上手的属性已经支持更多的背景图和局部(local)值该简单上手的属性已经支持更多的背景图和局部 (local) 值
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}
@@ -74,34 +74,34 @@

- 在双值语法中, 第一个值表示水平重复行为, 第二个值表示垂直重复行为. 下面是关于每一个值是怎么工作的具体说明: + 在双值语法中,第一个值表示水平重复行为,第二个值表示垂直重复行为。下面是关于每一个值是怎么工作的具体说明:
@@ -145,7 +145,7 @@

CSS

height: 84px; } -/* 因为 space 和 round 当前没有被广泛支持的, 所以没有添加*/ +/* 因为 space 和 round 当前没有被广泛支持的,所以没有添加*/ .one { background-repeat: no-repeat; } @@ -170,7 +170,7 @@

CSS

结果

-

在这个例子中, 每一个列表项都使用了不同的background-repeat语法.

+

在这个例子中,每一个列表项都使用了不同的background-repeat语法.

{{EmbedLiveSample("例子", 240, 360)}}

diff --git a/files/zh-cn/web/css/background-size/index.html b/files/zh-cn/web/css/background-size/index.html index f0fbb04f9f5bf5..23803b22b377a5 100644 --- a/files/zh-cn/web/css/background-size/index.html +++ b/files/zh-cn/web/css/background-size/index.html @@ -21,7 +21,7 @@ background-size: cover background-size: contain -/* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */ +/* 一个值:这个值指定图片的宽度,图片的高度隐式的为 auto */ background-size: 50% background-size: 3em background-size: 12px @@ -35,7 +35,7 @@ background-size: auto auto /* 逗号分隔的多个值:设置多重背景 */ -background-size: auto, auto /* 不同于background-size: auto auto */ +background-size: auto, auto /* 不同于 background-size: auto auto */ background-size: 50%, 25%, 25% background-size: 6px, auto, contain @@ -114,7 +114,7 @@

语法

  • 设定宽度和高度值
  • -

    当通过宽度和高度值来设定尺寸时,你可以提供一或者两个数值:

    +

    当通过宽度和高度值来设定尺寸时,你可以提供一或者两个数值:

    • 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为auto
    • @@ -171,12 +171,12 @@

      属性值

      containcover:
      保留固有比例,最大的包含或覆盖背景区。如果图像没有固有比例,则按背景区大小。
      autoauto auto:
      -
      图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例, 效果同 contain。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。
      -
      一个为 auto 另一个不是auto:
      +
      图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例,效果同 contain。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。
      +
      一个为 auto 另一个不是 auto:
      如果图像有固有比例,则指定的长度使用指定值,未指定的长度由指定值与固有比例计算。如果图像没有固有比例,则指定的长度使用指定值,未指定的长度使用图像相应的固有长度,若没有固有长度,则使用背景区相应的长度。
      -

      注意,对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7- 与Firefox 8+,以确定不同之处能否接受。

      +

      注意,对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试 Firefox 7- 与 Firefox 8+,以确定不同之处能否接受。

      Formal syntax

      @@ -190,7 +190,7 @@

      案例

      备注

      -

      如果用渐变作为背景并且对它使用了background-size ,最好不要只用一个auto, 或者只指定一个宽度值 (例如 background-size: 50%)。对这两种情况 Firefox 8有所改变, 并且目前各浏览器表现不一致,不是全部浏览器都完全支持 CSS3 background-size 规范CSS3 Image Values gradient 规范

      +

      如果用渐变作为背景并且对它使用了background-size ,最好不要只用一个 auto,或者只指定一个宽度值 (例如 background-size: 50%)。对这两种情况 Firefox 8 有所改变,并且目前各浏览器表现不一致,不是全部浏览器都完全支持 CSS3 background-size 规范CSS3 Image Values gradient 规范

      .bar {
              width: 50px; height: 100px;
      @@ -208,7 +208,7 @@ 

      备注

      }
      -

      特别不推荐对渐变px与auto一起用, 因为Firefox 8之前不能重复渲染,并且对于没有实现Firefox 8渲染特性的浏览器,不知道指定了背景的元素的确切大小。

      +

      特别不推荐对渐变 px 与auto一起用,因为 Firefox 8 之前不能重复渲染,并且对于没有实现 Firefox 8 渲染特性的浏览器,不知道指定了背景的元素的确切大小。

      规范

      diff --git a/files/zh-cn/web/css/background/index.html b/files/zh-cn/web/css/background/index.html index deeada74dd3af5..5725acccb3a34c 100644 --- a/files/zh-cn/web/css/background/index.html +++ b/files/zh-cn/web/css/background/index.html @@ -54,7 +54,7 @@

      语法

    • <background-color> 只能被包含在最后一层。
    -
    注意:  {{cssxref("background-color")}} 只能在background的最后一个属性上定义,因为整个元素只有一种背景颜色。
    +
    注意:  {{cssxref("background-color")}} 只能在 background 的最后一个属性上定义,因为整个元素只有一种背景颜色。

    diff --git a/files/zh-cn/web/css/basic-shape/index.html b/files/zh-cn/web/css/basic-shape/index.html index 8c3858149dc64d..795e7b5bf789ea 100644 --- a/files/zh-cn/web/css/basic-shape/index.html +++ b/files/zh-cn/web/css/basic-shape/index.html @@ -5,7 +5,7 @@ ---
    {{CSSRef}}
    -
    <basic-shape>是一种表现基础图形的CSS数据类型,作用于{{cssxref("clip-path")}} 与 {{cssxref("shape-outside")}} 属性中。
    +
    <basic-shape>是一种表现基础图形的 CSS 数据类型,作用于{{cssxref("clip-path")}} 与 {{cssxref("shape-outside")}} 属性中。
    @@ -19,7 +19,7 @@

    语法

    <basic-shape>数据类型可以由下列函数得到。

    -

    当构建一个图形时,运用了<basic-shape>值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点,该坐标轴的x轴正方向为右、y轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。

    +

    当构建一个图形时,运用了<basic-shape>值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点,该坐标轴的 x 轴正方向为右、y 轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。

    图形函数

    @@ -36,13 +36,13 @@

    图形函数

    可选参数<border-radius>用于定义插进长方形顶点的圆弧角度,该参数同上遵循边际速记语法(the syntax of the margin shorthand),给予一个、两个、或四个值都能设置四个偏移量。

    -

    如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中(例如,左右插进图像相叠75%)将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。

    +

    如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中(例如,左右插进图像相叠 75%)将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。

    circle()
    circle( [<shape-radius>]? [at <position>]? )
    -

    <shape-radius> 参数代表了 r, 即圆形的半径, 不接受负数作为该参数的值。一个以百分比表示的值将以公式 sqrt(width^2+height^2)/sqrt(2)计算,其中width与height为相关盒模型的宽与高。

    +

    <shape-radius> 参数代表了 r, 即圆形的半径, 不接受负数作为该参数的值。一个以百分比表示的值将以公式 sqrt(width^2+height^2)/sqrt(2)计算,其中 width 与 height 为相关盒模型的宽与高。

    {{cssxref("<position>")}} 参数定义了圆心的位置。省缺值为盒模型的中心。

    @@ -50,7 +50,7 @@

    图形函数

    ellipse( [<shape-radius>{2}]? [at <position>]? )
    -

    <shape-radius> 参数代表了 rx 与 ry,其中 rx 代表了x轴方向的半径, ry代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照,宽作为 rx 的参照值,高作为 ry 的参照值。

    +

    <shape-radius> 参数代表了 rx 与 ry,其中 rx 代表了 x 轴方向的半径,ry代表了 y 轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照,宽作为 rx 的参照值,高作为 ry 的参照值。

    <position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。

    @@ -58,15 +58,15 @@

    图形函数

    polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
    -

    <fill-rule> 代表了填充规则( filling rule ),即,如何填充该多边形。 可选值为 nonzero 和 evenodd。 该参数的省缺值为 nonzero。

    +

    <fill-rule> 代表了填充规则( filling rule ),即,如何填充该多边形。 可选值为 nonzero 和 evenodd。该参数的省缺值为 nonzero。

    -

    每一对在列表中的参数都代表了多边形顶点的坐标, xi 与 yi ,i代表顶点的编号,即,第i个顶点。

    +

    每一对在列表中的参数都代表了多边形顶点的坐标, xi 与 yi ,i 代表顶点的编号,即,第 i 个顶点。

    path(){{Experimental_Inline}}
    path( [<fill-rule>,]? <string>)
    -

    可选的 <fill-rule> 表示 filling rule 填充规则. 可选 nonzero (非零环绕规则)和 evenodd (奇偶规则) . 默认是(Default value when omitted) nonzero.

    +

    可选的 <fill-rule> 表示 filling rule 填充规则。可选 nonzero(非零环绕规则)和 evenodd(奇偶规则) 。 默认是(Default value when omitted)nonzero

    参数 <string> 是用引号包含的 SVG Path 字符串

    @@ -86,7 +86,7 @@

    图形函数

    基础图形的计算值

    -

    在 <basic-shape> 函数中的值通过指定的方式计算, 但是有下列情况会出现错误:

    +

    在 <basic-shape> 函数中的值通过指定的方式计算,但是有下列情况会出现错误:

    • 遗漏值(omitted values)参与到了省缺值的计算中。
    • @@ -100,9 +100,9 @@

      基础图形的插值

      • 一对的图形需要使用一样的盒模型。
      • -
      • 如果一对图形是同一种类型,例如, ellipse() 或 circle(), 并且没有任何半径使用了 closest-side 或 farthest-side 关键值, 那么这些值将会成为相应的图形函数的插值。
      • +
      • 如果一对图形是同一种类型,例如, ellipse() 或 circle(),并且没有任何半径使用了 closest-side 或 farthest-side 关键值,那么这些值将会成为相应的图形函数的插值。
      • 如果一对图形都属于 inset()类,那么这些值将会成为相应的图形函数的插值。
      • -
      • 如果一对图形都属于 polygon()类, 并且两者有同样数量的顶点,并且使用了相同的填充规则 <fill-rule>,那么这些值将会成为相应的图形函数的插值。
      • +
      • 如果一对图形都属于 polygon()类,并且两者有同样数量的顶点,并且使用了相同的填充规则 <fill-rule>,那么这些值将会成为相应的图形函数的插值。
      • 其余状况将不会出现插值。
      diff --git a/files/zh-cn/web/css/block-size/index.html b/files/zh-cn/web/css/block-size/index.html index c2026e9811bce0..938bf3dbd434f4 100644 --- a/files/zh-cn/web/css/block-size/index.html +++ b/files/zh-cn/web/css/block-size/index.html @@ -5,13 +5,13 @@ ---
      {{CSSRef}}{{SeeCompatTable}}
      -
      CSS的block-size属性定义了元素区块的水平宽度和垂直高度,也就是{{cssxref("width")}}或{{cssxref("height")}}属性,它们的大小取决于写入模式,即{{cssxref("writing-mode")}}的值。
      +
      CSS 的 block-size 属性定义了元素区块的水平宽度和垂直高度,也就是{{cssxref("width")}}或{{cssxref("height")}}属性,它们的大小取决于写入模式,即{{cssxref("writing-mode")}}的值。
      {{EmbedInteractiveExample("pages/css/block-size.html")}} 
       
      - +

      语句

      @@ -37,7 +37,7 @@

      语句

      block-size: unset;If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. A related property is {{cssxref("inline-size")}}, which defines the other dimension of the element. -

      如果写入模式为垂直方向,block-size的值与元素的宽度有关,否则取决于元素的高度。相关的属性是定义了元素的其它大小的{{cssxref("inline-size")}}。

      +

      如果写入模式为垂直方向,block-size 的值与元素的宽度有关,否则取决于元素的高度。相关的属性是定义了元素的其它大小的{{cssxref("inline-size")}}。

      语句

      diff --git a/files/zh-cn/web/css/border-block-end/index.html b/files/zh-cn/web/css/border-block-end/index.html index e3466da14d6c9a..d6800a2f333662 100644 --- a/files/zh-cn/web/css/border-block-end/index.html +++ b/files/zh-cn/web/css/border-block-end/index.html @@ -9,7 +9,7 @@
      {{EmbedInteractiveExample("pages/css/border-block-end.html")}}
      - +

      Syntax

      diff --git a/files/zh-cn/web/css/border-bottom-left-radius/index.html b/files/zh-cn/web/css/border-bottom-left-radius/index.html index 9051dc630cef8d..1a51fa7dfb8b5c 100644 --- a/files/zh-cn/web/css/border-bottom-left-radius/index.html +++ b/files/zh-cn/web/css/border-bottom-left-radius/index.html @@ -9,11 +9,11 @@

      Summary

      总览

      -

      border-bottom-left-radius 这个css属性设置元素左下角的圆角。圆角可以是圆或椭圆(注:应为圆或椭圆的一部分),或者当其中一个值为0时,圆角将不被设置,这时这个角将展示为直角。

      +

      border-bottom-left-radius 这个 css 属性设置元素左下角的圆角。圆角可以是圆或椭圆(注:应为圆或椭圆的一部分),或者当其中一个值为 0 时,圆角将不被设置,这时这个角将展示为直角。

      border-bottom-left-radius.png
      -

      一个无论是图像或颜色的背景,都会在边框上被裁剪,即使背景是圆角的; 裁剪的确切位置由 {{cssxref("background-clip")}} 属性定义.

      +

      一个无论是图像或颜色的背景,都会在边框上被裁剪,即使背景是圆角的; 裁剪的确切位置由 {{cssxref("background-clip")}} 属性定义。

      如果该属性的值没有被一个在border-bottom-left-radius 属性后,作用于当前元素上的{{cssxref("border-radius")}}简写属性设置,那么该属性值将会被shorthand property重置为初始值。
      diff --git a/files/zh-cn/web/css/border-bottom-style/index.html b/files/zh-cn/web/css/border-bottom-style/index.html index d3755d88c4ed1b..a59d58c46db6c6 100644 --- a/files/zh-cn/web/css/border-bottom-style/index.html +++ b/files/zh-cn/web/css/border-bottom-style/index.html @@ -39,7 +39,7 @@

      Formal syntax

      Examples

      -

      这是一种可显示border-bottom-style所有属性的标签。

      +

      这是一种可显示 border-bottom-style 所有属性的标签。

      HTML

      diff --git a/files/zh-cn/web/css/border-collapse/index.html b/files/zh-cn/web/css/border-collapse/index.html index 0f251e2cf7a829..93d87da810e4dd 100644 --- a/files/zh-cn/web/css/border-collapse/index.html +++ b/files/zh-cn/web/css/border-collapse/index.html @@ -19,11 +19,11 @@ -

      合并(collapsed )模式下,表格中相邻单元格共享边框。在这种模式下,CSS属性{{ Cssxref("border-style") }} 的值 inset 表现为槽,值 outset 表现为脊。

      +

      合并(collapsed )模式下,表格中相邻单元格共享边框。在这种模式下,CSS 属性{{ Cssxref("border-style") }} 的值 inset 表现为槽,值 outset 表现为脊。

      -

      分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 {{cssxref("border-spacing")}} 来确定的。

      +

      分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 属性 {{cssxref("border-spacing")}} 来确定的。

      语法

      diff --git a/files/zh-cn/web/css/border-color/index.html b/files/zh-cn/web/css/border-color/index.html index 68c5f3169fae25..aae023b39ec606 100644 --- a/files/zh-cn/web/css/border-color/index.html +++ b/files/zh-cn/web/css/border-color/index.html @@ -214,8 +214,8 @@

      {{CompatibilityTable}}

      其他参考

        -
      • 与border-color相关的CSS属性: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}},
      • -
      • 与边框相关的其他CSS属性: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}
      • +
      • 与 border-color 相关的 CSS 属性:{{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}},
      • +
      • 与边框相关的其他 CSS 属性:{{Cssxref("border-width")}}, {{Cssxref("border-style")}}
      diff --git a/files/zh-cn/web/css/border-image-outset/index.html b/files/zh-cn/web/css/border-image-outset/index.html index ab0f06fd00d538..a559ebac69a491 100644 --- a/files/zh-cn/web/css/border-image-outset/index.html +++ b/files/zh-cn/web/css/border-image-outset/index.html @@ -42,17 +42,17 @@

      sides
      边框图像在四个方向超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      horizontal
      -
      边框图像在水平方向(左和右)超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
      +
      边框图像在水平方向(左和右)超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      vertical
      -
      边框图像在垂直方向(上和下)超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
      +
      边框图像在垂直方向(上和下)超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      top
      -
      边框图像在上方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
      +
      边框图像在上方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      bottom
      -
      边框图像在下方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
      +
      边框图像在下方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      right
      -
      边框图像在右方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
      +
      边框图像在右方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      left
      -
      边框图像在左方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
      +
      边框图像在左方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
      inherit
      四个方向的值都继承于父元素的该属性计算后值。
      diff --git a/files/zh-cn/web/css/border-image-repeat/index.html b/files/zh-cn/web/css/border-image-repeat/index.html index f26a3a22e6d025..1ef4f35c802bc2 100644 --- a/files/zh-cn/web/css/border-image-repeat/index.html +++ b/files/zh-cn/web/css/border-image-repeat/index.html @@ -42,7 +42,7 @@

      Values

      round
      平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。
      space
      -
      平铺图像 。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)
      +
      平铺图像。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)
      inherit
      继承父级元素的计算值。
      diff --git a/files/zh-cn/web/css/border-image-slice/index.html b/files/zh-cn/web/css/border-image-slice/index.html index c7c37fc51d53a9..33f1aabc352b12 100644 --- a/files/zh-cn/web/css/border-image-slice/index.html +++ b/files/zh-cn/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@

      概要

      -

      通过 {{cssxref("border-image-source")}} 引用边框图片后,border-image-slice属性会将图片分割为9个区域:四个角,四个边(edges)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。

      +

      通过 {{cssxref("border-image-source")}} 引用边框图片后,border-image-slice属性会将图片分割为 9 个区域:四个角,四个边(edges)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。

      The nine regions defined by the border-image or border-image-slice properties

      @@ -16,10 +16,10 @@

      概要

      • 区域 1-4 为角区域(corner region)。 每一个都用一次来形成最终边界图像的角点。(Each one is used a single time to form the corners of the final border image.)
      • 区域 5-8 边区域(edge region)。在最终的边框图像中重复,缩放或修改它们以匹配元素的尺寸。(These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.)
      • -
      • 区域 9 为中心区域( middle region)。它在默认情况下会被丢弃,但如果设置了关键字fill,则会将其用作背景图像。(It is discarded by default, but is used like a background image if the keyword fill is set.)
      • +
      • 区域 9 为中心区域(middle region)。它在默认情况下会被丢弃,但如果设置了关键字fill,则会将其用作背景图像。(It is discarded by default, but is used like a background image if the keyword fill is set.)
      -

      中间的区域将不会被边框使用,但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)

      +

      中间的区域将不会被边框使用,但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置 (前面、后面或者两个值之间)

      {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 属性则定义这些图片将如何使用。

      @@ -37,7 +37,7 @@

      语法

      /* 上 右 下 左 */ border-image-slice: 7 12 14 5; -/* 使用fill(fill可以放在任意位置) */ +/* 使用 fill(fill 可以放在任意位置) */ border-image-slice: 10% fill 7 12; /* Global values */ diff --git a/files/zh-cn/web/css/border-image-width/index.html b/files/zh-cn/web/css/border-image-width/index.html index 8a5ba4b1a183f2..30ac348cdfa48c 100644 --- a/files/zh-cn/web/css/border-image-width/index.html +++ b/files/zh-cn/web/css/border-image-width/index.html @@ -61,7 +61,7 @@

      取值

      <长度-百分比>
      -
      边界的宽度, 可按 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 指定。百分比是相较于水平(垂直)方向上的边框图像区域宽度(高度)的偏移量,不能为负。
      +
      边界的宽度,可按 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 指定。百分比是相较于水平(垂直)方向上的边框图像区域宽度(高度)的偏移量,不能为负。
      <数值>
      边框宽度,指定为 {{cssxref("border-width")}} 的相应倍数,不能为负。
      auto
      @@ -112,7 +112,7 @@

      技术规格

    repeat -

    图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

    +

    图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪,如果它的大小不合适的话。

    space -

    图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. {{cssxref("background-position")}}属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

    +

    图像会尽可能得重复,但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上,同时空白会均匀地分布在图像之间. {{cssxref("background-position")}}属性会被忽视,除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生,那就是图像太大了以至于没有足够的空间来完整显示一个图像。

    round -

    随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.

    +

    随着允许的空间在尺寸上的增长,被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后,所有的当前的图像会被压缩来腾出空间。例如,一个图像原始大小是 260px, 重复三次之后,可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.

    -

    译者注: 关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.

    +

    译者注:关键是浏览器怎么计算什么时候应该添加一个图像进来,而不是继续伸展。

    no-repeat -

    图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由{{cssxref("background-position")}}属性来决定.

    +

    图像不会被重复 (因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由{{cssxref("background-position")}}属性来决定。

    - + diff --git a/files/zh-cn/web/css/border-image/index.html b/files/zh-cn/web/css/border-image/index.html index ee38a1a162f30b..9c0fc4a6a15340 100644 --- a/files/zh-cn/web/css/border-image/index.html +++ b/files/zh-cn/web/css/border-image/index.html @@ -11,9 +11,9 @@ ---
    {{CSSRef}}
    -

    border-image CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 border-image 时,其将会替换掉 {{cssxref("border-style")}} 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。

    +

    border-image CSS 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 border-image 时,其将会替换掉 {{cssxref("border-style")}} 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。

    -

    特别注意,若 {{cssxref("border-image-source")}}(此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示,则将应用 border-style。

    +

    特别注意,若 {{cssxref("border-image-source")}}(此值可用 border-image-source 或 border-image 简写设置) 的值为 none 或者图片不能显示,则将应用 border-style。

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/border-left-color/index.html b/files/zh-cn/web/css/border-left-color/index.html index 1f41f49f643ced..9bb6814678c3ef 100644 --- a/files/zh-cn/web/css/border-left-color/index.html +++ b/files/zh-cn/web/css/border-left-color/index.html @@ -25,7 +25,7 @@

    语法 

    -

     border-left-color 属性取值为单个颜色值.

    +

    border-left-color 属性取值为单个颜色值。

    取值

    diff --git a/files/zh-cn/web/css/border-left-width/index.html b/files/zh-cn/web/css/border-left-width/index.html index 96dab4dcb98da1..7b80702c950946 100644 --- a/files/zh-cn/web/css/border-left-width/index.html +++ b/files/zh-cn/web/css/border-left-width/index.html @@ -3,8 +3,8 @@ slug: Web/CSS/border-left-width tags: - CSS - - CSS属性 - - CSS边框 + - CSS 属性 + - CSS 边框 translation_of: Web/CSS/border-left-width ---
    {{CSSRef}}
    @@ -36,7 +36,7 @@

    数值

    <br-width>
    -
    定义边框的宽度,或者作为显性非负的长度值 {{cssxref("<length>")}} 或者是关键字. 如果他是一个关键字,它必须是下列值的一种: +
    定义边框的宽度,或者作为显性非负的长度值 {{cssxref("<length>")}} 或者是关键字。如果他是一个关键字,它必须是下列值的一种:
    CSS版本CSS 版本 状态 评注
    @@ -64,7 +64,7 @@

    数值

    -

    笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

    +

    笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

    @@ -112,7 +112,7 @@

    规格

    {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}} {{Spec2('CSS3 Backgrounds')}} - 没有规格变化. + 没有规格变化。 {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}} diff --git a/files/zh-cn/web/css/border-left/index.html b/files/zh-cn/web/css/border-left/index.html index ebbb7347081315..aeedd697a8be4e 100644 --- a/files/zh-cn/web/css/border-left/index.html +++ b/files/zh-cn/web/css/border-left/index.html @@ -9,7 +9,7 @@ ---
    {{CSSRef}}
    -

    CSS属性 border-left 是属性{{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, 和{{ Cssxref("border-left-width") }}的三者的缩写。这些属性都是在描述一个元素的左边的边框{{cssxref("border")}}。

    +

    CSS 属性 border-left 是属性{{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, 和{{ Cssxref("border-left-width") }}的三者的缩写。这些属性都是在描述一个元素的左边的边框{{cssxref("border")}}。

    border-left: 1px;
     border-left: 2px dotted;
    @@ -19,7 +19,7 @@
     

    这三种属性值的缩写需要按照顺序定义数值,也可以省略其中的一个或者两个。

    -

    和CSS所有的缩写属性一样,border-left 总是会设置该缩写属性所包含的全部属性值,即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

    +

    和 CSS 所有的缩写属性一样,border-left 总是会设置该缩写属性所包含的全部属性值,即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

    border-left-style: dotted;
     border-left: thick green;
    @@ -31,7 +31,7 @@
     border-left: none thick green;
     
    -

    ......并且在 border-left 之前定义的 {{ Cssxref("border-left-style") }} 的值也会被覆盖。由于 {{ Cssxref("border-left-style") }} 的默认值是 none, border-style的最终结果就是没有边框。

    +

    ......并且在 border-left 之前定义的 {{ Cssxref("border-left-style") }} 的值也会被覆盖。由于 {{ Cssxref("border-left-style") }} 的默认值是 none, border-style 的最终结果就是没有边框。

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/border-radius/index.html b/files/zh-cn/web/css/border-radius/index.html index a8cb811ed780cc..c59ed7c822576c 100644 --- a/files/zh-cn/web/css/border-radius/index.html +++ b/files/zh-cn/web/css/border-radius/index.html @@ -12,7 +12,7 @@ ---

    {{ CSSRef("CSS Borders") }}

    -

    CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

    +

    CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个 (椭) 圆与边框的交集形成圆角效果。

    Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

    @@ -97,7 +97,7 @@
    使用百分数定义圆形半径或椭圆的半长轴,半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度。负值无效。
    -

    例如:

    +

    例如:

    border-radius: 1em/5em;
     
    diff --git a/files/zh-cn/web/css/border-right-color/index.html b/files/zh-cn/web/css/border-right-color/index.html
    index d295cd26aa9bc2..5ab4ac67f0e325 100644
    --- a/files/zh-cn/web/css/border-right-color/index.html
    +++ b/files/zh-cn/web/css/border-right-color/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{CSSRef}}
    -

    border-right-color CSS属性用来设置元素右边的 {{cssxref("border")}}. 这个属性的值也可以通过简写的CSS属性 {{cssxref("border-color")}} 或{{cssxref("border-right")}}来设置.

    +

    border-right-color CSS 属性用来设置元素右边的 {{cssxref("border")}}. 这个属性的值也可以通过简写的 CSS 属性 {{cssxref("border-color")}} 或{{cssxref("border-right")}}来设置。

    {{EmbedInteractiveExample("pages/css/border-right-color.html")}}
    diff --git a/files/zh-cn/web/css/border-right-style/index.html b/files/zh-cn/web/css/border-right-style/index.html index 13b659a5b022ef..75b14ec730a8c7 100644 --- a/files/zh-cn/web/css/border-right-style/index.html +++ b/files/zh-cn/web/css/border-right-style/index.html @@ -5,13 +5,13 @@ ---
    {{CSSRef}}
    -

    border-right-style 是border中的一个 CSS 子属性,描述的是右边框的样式 {{cssxref("border")}}.

    +

    border-right-style 是 border 中的一个 CSS 子属性,描述的是右边框的样式 {{cssxref("border")}}.

    {{EmbedInteractiveExample("pages/css/border-right-style.html")}}
    -
    备注: 这个css没有定义不同样式的边界之间如何拼接。
    +
    备注: 这个 css 没有定义不同样式的边界之间如何拼接。

    Syntax

    @@ -124,6 +124,6 @@

    浏览器兼容性参考

      -
    • 其他样式相关边框属性: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-style")}}.
    • -
    • 其他bottom-border-related属性: {{Cssxref("border-right")}}, {{Cssxref("border-right-color")}}, and {{Cssxref("border-right-width")}}.
    • +
    • 其他样式相关边框属性:{{Cssxref("border-bottom-style")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-style")}}.
    • +
    • 其他 bottom-border-related 属性:{{Cssxref("border-right")}}, {{Cssxref("border-right-color")}}, and {{Cssxref("border-right-width")}}.
    diff --git a/files/zh-cn/web/css/border-right-width/index.html b/files/zh-cn/web/css/border-right-width/index.html index d02380e6484425..54ddd06fe08316 100644 --- a/files/zh-cn/web/css/border-right-width/index.html +++ b/files/zh-cn/web/css/border-right-width/index.html @@ -3,8 +3,8 @@ slug: Web/CSS/border-right-width tags: - CSS - - CSS属性 - - CSS边框 + - CSS 属性 + - CSS 边框 - 引用 translation_of: Web/CSS/border-right-width --- @@ -66,7 +66,7 @@

    数值

    -

    笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

    +

    笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

    @@ -114,17 +114,17 @@

    规格

    {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}} {{Spec2('CSS3 Backgrounds')}} - 没有规格变化. + 没有规格变化。 {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}} {{Spec2('CSS2.1')}} - 没有规格变化. + 没有规格变化。 {{SpecName('CSS1', '#border-left-width', 'border-right-width')}} {{Spec2('CSS1')}} - 最初的定义. + 最初的定义。 diff --git a/files/zh-cn/web/css/border-right/index.html b/files/zh-cn/web/css/border-right/index.html index 5fb217bb09b224..b6658d77873b17 100644 --- a/files/zh-cn/web/css/border-right/index.html +++ b/files/zh-cn/web/css/border-right/index.html @@ -9,7 +9,7 @@ ---
    {{CSSRef}}
    -

    CSS属性 border-right 是属性{{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, 和{{ Cssxref("border-right-width") }}的三者的缩写。这些属性都是在描述一个元素的右边的边框border

    +

    CSS 属性 border-right 是属性{{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, 和{{ Cssxref("border-right-width") }}的三者的缩写。这些属性都是在描述一个元素的右边的边框border

    border-right: 1px;
     border-right: 2px dotted;
    @@ -17,7 +17,7 @@
     
    -

    和CSS所有的缩写属性一样,border-right 总是会设置该缩写属性所包含的全部属性值,即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

    +

    和 CSS 所有的缩写属性一样,border-right 总是会设置该缩写属性所包含的全部属性值,即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

    border-right-style: dotted;
     border-right: thick green;
    @@ -29,7 +29,7 @@
       border-right: none thick green;
     
    -

     ......并且在 border-right 之前定义的 {{ Cssxref("border-right-style") }} 的值也会被覆盖。由于{{ Cssxref("border-right-style") }} 的默认值是 none, border-style的最终结果就是没有边框。

    +

     ......并且在 border-right 之前定义的 {{ Cssxref("border-right-style") }} 的值也会被覆盖。由于{{ Cssxref("border-right-style") }} 的默认值是 none, border-style 的最终结果就是没有边框。

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/border-spacing/index.html b/files/zh-cn/web/css/border-spacing/index.html index 4fecd64f659180..b1363505ef33bf 100644 --- a/files/zh-cn/web/css/border-spacing/index.html +++ b/files/zh-cn/web/css/border-spacing/index.html @@ -9,7 +9,7 @@

    概述

    border-spacing 属性指定相邻单元格边框之间的距离(只适用于 边框分离模式 )。相当于 HTML 中的 cellspacing 属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

    -

    border-spacing 值也适用于表格的外层边框上,即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的(水平的或垂直的) 边框间距(border-spacing)和相应的(上,右,下或左)内边距之和。

    +

    border-spacing 值也适用于表格的外层边框上,即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的(水平的或垂直的)边框间距(border-spacing)和相应的(上,右,下或左)内边距之和。

    该属性只适用于 {{ Cssxref("border-collapse") }} 值是 separate 的时候。

    diff --git a/files/zh-cn/web/css/border-top-color/index.html b/files/zh-cn/web/css/border-top-color/index.html index 71a1da0fca7bc4..9194f581615fe4 100644 --- a/files/zh-cn/web/css/border-top-color/index.html +++ b/files/zh-cn/web/css/border-top-color/index.html @@ -4,7 +4,7 @@ tags: - CSS - CSS Borders - - CSS属性 + - CSS 属性 translation_of: Web/CSS/border-top-color ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/border-top-left-radius/index.html b/files/zh-cn/web/css/border-top-left-radius/index.html index b3374a229b6a69..d22b061a28b6ad 100644 --- a/files/zh-cn/web/css/border-top-left-radius/index.html +++ b/files/zh-cn/web/css/border-top-left-radius/index.html @@ -3,20 +3,20 @@ slug: Web/CSS/border-top-left-radius tags: - CSS - - CSS属性 - - CSS边框 - - CSS边框圆角 + - CSS 属性 + - CSS 边框 + - CSS 边框圆角 translation_of: Web/CSS/border-top-left-radius ---

    概要

    -

    border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧(角)可以是圆或椭圆的一部分。如果其中有一个值为0,那么将无圆角效果(见border-top-left-radius取值方式)。

    +

    border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧(角)可以是圆或椭圆的一部分。如果其中有一个值为 0,那么将无圆角效果(见border-top-left-radius取值方式)。

    border-radius.png
    -

    盒模型的背景,可以是一张图片或一种颜色,会在边框处被剪裁,更甚至可以是一个圆;剪切的额外定位通过另一个CSS属性"background-clip"来定义。

    +

    盒模型的背景,可以是一张图片或一种颜色,会在边框处被剪裁,更甚至可以是一个圆;剪切的额外定位通过另一个 CSS 属性"background-clip"来定义。

    -
    在border-top-left-radius属性值之后,如果作用的元素上没有设置“border-radius”属性,那么这个属性值就会通过简写属性重新设置成它的初始值。
    +
    在 border-top-left-radius 属性值之后,如果作用的元素上没有设置“border-radius”属性,那么这个属性值就会通过简写属性重新设置成它的初始值。

    语法

    diff --git a/files/zh-cn/web/css/border-top-right-radius/index.html b/files/zh-cn/web/css/border-top-right-radius/index.html index 4a1df1726ab45a..d3d5ed8341d9c3 100644 --- a/files/zh-cn/web/css/border-top-right-radius/index.html +++ b/files/zh-cn/web/css/border-top-right-radius/index.html @@ -2,8 +2,8 @@ title: border-top-right-radius slug: Web/CSS/border-top-right-radius tags: - - CSS属性 - - CSS边框 + - CSS 属性 + - CSS 边框 - Layout - 互联网 - 参考 @@ -14,13 +14,13 @@

    概要

    -

    border-top-right-radius属性设置元素的右上角弧形,这个圆弧可能是一个椭圆,或者其中一个值是0的话,就是没有圆弧,换句话就是说拐角是方形的。

    +

    border-top-right-radius属性设置元素的右上角弧形,这个圆弧可能是一个椭圆,或者其中一个值是 0 的话,就是没有圆弧,换句话就是说拐角是方形的。

    border-top-right-radius.png
    -

    一个背景通常以一张图片或者颜色开始,在边框处被剪切,更甚至就是一个圆形;剪切的额外定位通过一个CSS属性"background-clip"来定义。

    +

    一个背景通常以一张图片或者颜色开始,在边框处被剪切,更甚至就是一个圆形;剪切的额外定位通过一个 CSS 属性"background-clip"来定义。

    -
    在border-top-radius-radiu属性值之后,如果作用在一个元素上没有设置“border-radius”简写属性,那么这个属性值就会通过简写属性重新设置成它的初始值。
    +
    在 border-top-radius-radiu 属性值之后,如果作用在一个元素上没有设置“border-radius”简写属性,那么这个属性值就会通过简写属性重新设置成它的初始值。

    {{cssinfo}}

    @@ -44,7 +44,7 @@

     
    -

    之上:

    +

    之上:

    radius
    @@ -197,4 +197,4 @@

    参见

    -

    边框半径相关的CSS属性:CSS速记 {{ cssxref("border-radius") }}, 其它角的属性:{{ cssxref("border-top-left-radius") }}, {{ cssxref("border-bottom-right-radius") }}和 {{ cssxref("border-bottom-left-radius") }}。

    +

    边框半径相关的 CSS 属性:CSS 速记 {{ cssxref("border-radius") }}, 其它角的属性:{{ cssxref("border-top-left-radius") }}, {{ cssxref("border-bottom-right-radius") }}和 {{ cssxref("border-bottom-left-radius") }}。

    diff --git a/files/zh-cn/web/css/border-top-style/index.html b/files/zh-cn/web/css/border-top-style/index.html index f49e5d791786fa..576e2e023e9c3c 100644 --- a/files/zh-cn/web/css/border-top-style/index.html +++ b/files/zh-cn/web/css/border-top-style/index.html @@ -37,7 +37,7 @@

    语法

    border-top-style: unset;

    -

    选取以上可用关键字之一作为 {{cssxref("border-style")}} 的 border-top-style 属性的值.

    +

    选取以上可用关键字之一作为 {{cssxref("border-style")}} 的 border-top-style 属性的值。

    形式化语法

    diff --git a/files/zh-cn/web/css/border-top-width/index.html b/files/zh-cn/web/css/border-top-width/index.html index fcd74fcfd70a34..0d6593e4d1d51f 100644 --- a/files/zh-cn/web/css/border-top-width/index.html +++ b/files/zh-cn/web/css/border-top-width/index.html @@ -5,7 +5,7 @@ ---
    {{CSSRef}}
    -

    css属性 border-top-width 是用于设置盒模型的上边框的宽度

    +

    css 属性 border-top-width 是用于设置盒模型的上边框的宽度

    {{EmbedInteractiveExample("pages/css/border-top-width.html")}}
    diff --git a/files/zh-cn/web/css/border-top/index.html b/files/zh-cn/web/css/border-top/index.html index 307bc6dde11731..4696ed26e95e0b 100644 --- a/files/zh-cn/web/css/border-top/index.html +++ b/files/zh-cn/web/css/border-top/index.html @@ -9,11 +9,11 @@ ---
    {{CSSRef}}
    -

    CSS属性 border-top是属性 {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, 和{{Cssxref("border-top-width")}} 的三者的缩写。这些属性都是在描述一个元素的上方的边框border

    +

    CSS 属性 border-top是属性 {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, 和{{Cssxref("border-top-width")}} 的三者的缩写。这些属性都是在描述一个元素的上方的边框border

    {{EmbedInteractiveExample("pages/css/border-top.html")}}

    -

    与所有缩写属性(shorthand properties)一样,border-top始终设置它可以设置的所有属性的值,即使未指定它们也是如此。 它将未指定的那些设置为其默认值。 这意味着

    +

    与所有缩写属性(shorthand properties)一样,border-top始终设置它可以设置的所有属性的值,即使未指定它们也是如此。它将未指定的那些设置为其默认值。这意味着

    border-top-style: dotted;
     border-top: thick green;
    diff --git a/files/zh-cn/web/css/border-width/index.html b/files/zh-cn/web/css/border-width/index.html index f6b472cff1f41f..abda12ed01b5fb 100644 --- a/files/zh-cn/web/css/border-width/index.html +++ b/files/zh-cn/web/css/border-width/index.html @@ -26,7 +26,7 @@

    语法

    border-width: 2px 1.5em; /* 当给定三个宽度时,该宽度分别依次作用于选定元素的上横边、纵边、下横边 */ border-width: 1px 2em 1.5cm; -/* 当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 (即按顺时针依次作用) */ +/* 当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边(即按顺时针依次作用) */ border-width: 1px 2em 0 4rem; /* 用法二:使用全局关键字 */ @@ -84,7 +84,7 @@

    正式语法

    -

    提示:规范并没有规定关键字的实际值故在不同浏览器效果是不一样的,但显然thin≤medium≤thick,并且值在单个文档中是恒定的

    +

    提示:规范并没有规定关键字的实际值故在不同浏览器效果是不一样的,但显然 thin≤medium≤thick,并且值在单个文档中是恒定的

    示例

    diff --git a/files/zh-cn/web/css/border/index.html b/files/zh-cn/web/css/border/index.html index 4dd16768c2f666..09834d234767e6 100644 --- a/files/zh-cn/web/css/border/index.html +++ b/files/zh-cn/web/css/border/index.html @@ -11,16 +11,16 @@

    概览

    -

    CSS的border属性是一个用于设置各种单独的边界属性的简写属性border可以用于设置一个或多个以下属性的值: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}。

    +

    CSS的 border 属性是一个用于设置各种单独的边界属性的简写属性border可以用于设置一个或多个以下属性的值: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}。

    {{EmbedInteractiveExample("pages/css/border.html")}}

    -

    和所有的简写属性一样,如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对{{cssxref("border-image")}}属性的影响,虽然border属性不能设置这个属性,但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。

    +

    和所有的简写属性一样,如果有缺省值会被设置成对应属性的初始值。同时需要注意设置 border 对{{cssxref("border-image")}}属性的影响,虽然 border 属性不能设置这个属性,但会把该属性重置为初始值 none。这使得我们可以用 border 属性去重置整个样式表中的 border 设置。因为 W3C 计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。

    -

    注意: 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色,但boder属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。

    +

    注意: 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色,但 boder 属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。

    Borders vs. outlines

    @@ -51,10 +51,10 @@

    语法

    border: initial; border: unset;
    -

    可以使用下面列出的一个,两个或三个值来指定border属性。 值的顺序无关紧要。

    +

    可以使用下面列出的一个,两个或三个值来指定border属性。值的顺序无关紧要。

    -

    注意:如果边框的样式未定义,它将不可见。 这是因为样式默认为none。

    +

    注意:如果边框的样式未定义,它将不可见。这是因为样式默认为 none。

    取值

    @@ -65,7 +65,7 @@

    取值

    border-style 
    请看 {{ Cssxref("border-style") }}.
    border-color 
    -
    {{cssxref("<color>")}} 可以确定border的颜色。如果这个值没有设置,它的默认值是元素的{{cssxref("color")}}属性值(是文字颜色而非背景色)。 请看{{ Cssxref("border-color") }}.
    +
    {{cssxref("<color>")}} 可以确定 border 的颜色。如果这个值没有设置,它的默认值是元素的{{cssxref("color")}}属性值(是文字颜色而非背景色)。请看{{ Cssxref("border-color") }}.

    正式语法

    @@ -111,14 +111,14 @@

    规范

    {{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}} {{Spec2('CSS3 Backgrounds')}} 在理论上删除了对transparent的支持,因为{{cssxref("<color>")}}已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。
    - 虽然border不能给{{cssxref("border-image")}}赋特定的值,但可以用于重置{{cssxref("border-image")}}为初始值(none). + 虽然 border 不能给{{cssxref("border-image")}}赋特定的值,但可以用于重置{{cssxref("border-image")}}为初始值 (none). {{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}} {{Spec2('CSS2.1')}}

    加入inherit关键字。
    - 接受transparent作为有效的颜色值。

    + 接受 transparent 作为有效的颜色值。

    diff --git a/files/zh-cn/web/css/bottom/index.html b/files/zh-cn/web/css/bottom/index.html index d3faebe48c5e98..e461b5acc13b99 100644 --- a/files/zh-cn/web/css/bottom/index.html +++ b/files/zh-cn/web/css/bottom/index.html @@ -12,7 +12,7 @@
    • position设置为absolutefixed时,bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。
    • position设置为relative时,bottom属性指定了元素的下边界离开其正常位置的偏移。
    • -
    • position设置为sticky时,如果元素在viewport里面,bottom属性的效果和position为relative等同;如果元素在viewport外面,bottom属性的效果和position为fixed等同。
    • +
    • position设置为sticky时,如果元素在 viewport 里面,bottom属性的效果和 position 为relative等同;如果元素在 viewport 外面,bottom属性的效果和 position 为fixed等同。
    • position设置为static时,bottom属性无效。
    @@ -52,7 +52,7 @@

    auto
    规定:
      -
    • 对于绝对定位元素,元素将忽略此属性而以{{ Cssxref("top") }}属性为准,如果此时设置height: auto,将基于内容需要的高度设置宽度;如果top也为auto的话,元素的垂直位置就是它假如作为静态(即static)元素时该在的位置。
    • +
    • 对于绝对定位元素,元素将忽略此属性而以{{ Cssxref("top") }}属性为准,如果此时设置height: auto,将基于内容需要的高度设置宽度;如果top也为auto的话,元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
    • 对于相对定位元素,元素相对正常位置的偏移量将基于{{ Cssxref("top") }}属性;如果top也为auto的话,元素将不会有偏移。
    @@ -66,7 +66,7 @@

    Formal syntax

    示例

    -

    下面的例子分别展示了bottom属性在positionabsolutefixed的不同行为.

    +

    下面的例子分别展示了bottom属性在positionabsolutefixed的不同行为。

    HTML

    diff --git a/files/zh-cn/web/css/box-decoration-break/index.html b/files/zh-cn/web/css/box-decoration-break/index.html index 5e7b1aefa516fb..5692718f7f0f6d 100644 --- a/files/zh-cn/web/css/box-decoration-break/index.html +++ b/files/zh-cn/web/css/box-decoration-break/index.html @@ -41,9 +41,9 @@

    slice
    -
    元素被按照盒子被切割前的原始样式渲染,之后,针对每个行/列/页面将此假设框渲染成片段。请注意,假设框对于每个片段可以是不同的,因为如果中断发生在行内方向,则它使用自己的高度,如果中断发生在块方向,则它使用自己的宽度。有关详细信息,请参阅CSS规范。
    +
    元素被按照盒子被切割前的原始样式渲染,之后,针对每个行/列/页面将此假设框渲染成片段。请注意,假设框对于每个片段可以是不同的,因为如果中断发生在行内方向,则它使用自己的高度,如果中断发生在块方向,则它使用自己的宽度。有关详细信息,请参阅 CSS 规范。
    clone
    -
    每个框片段与指定的边框、填充和边距独立呈现。The {{ Cssxref("border-radius") }}、{{ Cssxref("border-image") }}、 {{ Cssxref("box-shadow") }}独立地应用于每个片段,每个片段的背景也是独立绘制的, 这意味着使用 {{ Cssxref("background-repeat") }}: no-repeat 的背景图片仍然可能重复多次.
    +
    每个框片段与指定的边框、填充和边距独立呈现。The {{ Cssxref("border-radius") }}、{{ Cssxref("border-image") }}、 {{ Cssxref("box-shadow") }}独立地应用于每个片段,每个片段的背景也是独立绘制的,这意味着使用 {{ Cssxref("background-repeat") }}: no-repeat 的背景图片仍然可能重复多次。

    正式语法

    @@ -73,17 +73,17 @@

    行内盒子片段

    ... <span class="example">The<br>quick<br>orange fox</span>
    -

    ... 效果:

    +

    ... 效果:

    A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

    -

    添加 box-decoration-break: clone 样式之后:

    +

    添加 box-decoration-break: clone 样式之后:

    -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     
    -

    ... 效果:

    +

    ... 效果:

    A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

    diff --git a/files/zh-cn/web/css/box-orient/index.html b/files/zh-cn/web/css/box-orient/index.html index a32d0c5bb15460..fdf657c010fa2a 100644 --- a/files/zh-cn/web/css/box-orient/index.html +++ b/files/zh-cn/web/css/box-orient/index.html @@ -4,7 +4,7 @@ translation_of: Web/CSS/box-orient ---
    {{CSSRef}}{{Non-standard_header}} -

    这是原始的css弹性布局草案的一个属性,已经被最新的标准替代。 查看 flexbox 了解现行标准。

    +

    这是原始的 css 弹性布局草案的一个属性,已经被最新的标准替代。查看 flexbox 了解现行标准。

    box-orient CSS 属性用来设置一个元素是水平还是垂直布局其内容。

    diff --git a/files/zh-cn/web/css/box-shadow/index.html b/files/zh-cn/web/css/box-shadow/index.html index 971507d67aebb3..11e98b888d7636 100644 --- a/files/zh-cn/web/css/box-shadow/index.html +++ b/files/zh-cn/web/css/box-shadow/index.html @@ -13,28 +13,28 @@ ---

    {{CSSRef}}

    -

    CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

    +

    CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

    {{EmbedInteractiveExample("pages/css/box-shadow.html")}}
    -

    你几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 {{ cssxref("border-radius") }}属性 ,那么阴影也会有圆角效果。多个阴影在z轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。

    +

    你几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 {{ cssxref("border-radius") }}属性,那么阴影也会有圆角效果。多个阴影在 z 轴上的顺序和多个 text shadows 规则相同 (第一个阴影在最上面)。

    Box-shadow generator  是一个允许你生成 box-shadow 的交互式工具。

    语法

    -
    /* x偏移量 | y偏移量 | 阴影颜色 */
    +
    /* x 偏移量 | y 偏移量 | 阴影颜色 */
     box-shadow: 60px -16px teal;
     
    -/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
    +/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
     box-shadow: 10px 5px 5px black;
     
    -/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    +/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
     box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
     
    -/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
    +/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
     box-shadow: inset 5em 1em gold;
     
     /* 任意数量的阴影,以逗号分隔 */
    @@ -52,9 +52,9 @@ 

    语法

  • 当给出两个、三个或四个 <length>值时。
      -
    • 如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y> 来解释。
    • -
    • 如果给出了第三个值, 那么第三个值将会被当作<blur-radius>解释。
    • -
    • 如果给出了第四个值, 那么第四个值将会被当作<spread-radius>来解释。
    • +
    • 如果只给出两个值,那么这两个值将会被当作 <offset-x><offset-y> 来解释。
    • +
    • 如果给出了第三个值,那么第三个值将会被当作<blur-radius>解释。
    • +
    • 如果给出了第四个值,那么第四个值将会被当作<spread-radius>来解释。
  • 可选,inset关键字。
  • @@ -68,40 +68,40 @@

    取值

    inset
    如果没有指定inset,默认阴影在边框外,即阴影向外扩散。
    - 使用 inset 关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
    + 使用 inset 关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
    <offset-x> <offset-y>
    -
    这是头两个 {{cssxref("<length>")}} 值,用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的,只不过y垂直方向向下。  <offset-x> 设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。可用单位请查看 {{cssxref("<length>")}} 。
    -
    如果两者都是0,那么阴影位于元素后面。这时如果设置了<blur-radius><spread-radius> 则有模糊效果。需要考虑 inset 
    +
    这是头两个 {{cssxref("<length>")}} 值,用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的,只不过 y 垂直方向向下。  <offset-x> 设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。可用单位请查看 {{cssxref("<length>")}} 。
    +
    如果两者都是 0,那么阴影位于元素后面。这时如果设置了<blur-radius><spread-radius> 则有模糊效果。需要考虑 inset 
    <blur-radius>
    -
    这是第三个 {{cssxref("<length>")}} 值。值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法,但是,它详细说明如下:
    +
    这是第三个 {{cssxref("<length>")}} 值。值越大,模糊面积越大,阴影就越大越淡。不能为负值。默认为 0,此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法,但是,它详细说明如下:
    对于长而直的阴影边缘,它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域,过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 (译者注:对此有兴趣的可以了解下数字图像处理的模糊算法。)
    <spread-radius>
    -
    这是第四个 {{cssxref("<length>")}} 值。取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。需要考虑 inset 
    +
    这是第四个 {{cssxref("<length>")}} 值。取正值时,阴影扩大;取负值时,阴影收缩。默认为 0,此时阴影与元素同样大。需要考虑 inset 
    <color>
    -
    相关事项查看 {{cssxref("<color>")}} 。如果没有指定,则由浏览器决定——通常是{{cssxref("color")}}的值,不过目前Safari取透明。
    +
    相关事项查看 {{cssxref("<color>")}} 。如果没有指定,则由浏览器决定——通常是{{cssxref("color")}}的值,不过目前 Safari 取透明。

    合成

    -

    将none看做是长度为0的列表。

    +

    将 none 看做是长度为 0 的列表。

    -

    列表中的每个阴影通过color组件(作为颜色),以及 x,y,blur,(合适的时候)加上spread组件(作为长度)进行合成。对于每个阴影,如果两个输入的阴影都是inset或者都不是inset,那么要添加的阴影必须考虑已存在的阴影。如果任何一对输入阴影中,一个是inset,另一个不是inset,那么整个阴影列表就是不可合成的。如果阴影列表有不同的长度,那么较短的列表会在尾部补上这类阴影:颜色透明,所有长度为0,inset还是非inset同较长的列表。

    +

    列表中的每个阴影通过color组件(作为颜色),以及 x,y,blur,(合适的时候)加上 spread 组件(作为长度)进行合成。对于每个阴影,如果两个输入的阴影都是 inset 或者都不是 inset,那么要添加的阴影必须考虑已存在的阴影。如果任何一对输入阴影中,一个是 inset,另一个不是 inset,那么整个阴影列表就是不可合成的。如果阴影列表有不同的长度,那么较短的列表会在尾部补上这类阴影:颜色透明,所有长度为 0,inset 还是非 inset 同较长的列表。

    正规文法

    {{csssyntax}}

    例子

    -

    第一个例子中,包括了三种shadows,内置的阴影, 常规的下沉阴影, 和一个2个像素宽度的border式的阴影 (可以用 {{cssxref('outline')}} 来替代第三种)。

    +

    第一个例子中,包括了三种 shadows,内置的阴影,常规的下沉阴影,和一个 2 个像素宽度的 border 式的阴影 (可以用 {{cssxref('outline')}} 来替代第三种)。

    HTML

    @@ -143,9 +143,9 @@

    CSS

    {{EmbedLiveSample('Examples2', '300', '300')}}

    -

    当 x-offset, y-offset, 和  blur 都是0, 盒阴影将是一个四边都是一样长度的带有颜色的outline. 当设置了多个阴影时,阴影绘制由最后一个开始, 故第一个设置的阴影将覆盖在后设置的阴影之上. 当border-radius设置为0时(也是其默认值), 阴影的四角将没有弧度. 当我们设置了border-radius为其他不为0的值时,阴影的四角也随之形成弧度。

    +

    当 x-offset, y-offset, 和  blur 都是 0, 盒阴影将是一个四边都是一样长度的带有颜色的outline. 当设置了多个阴影时,阴影绘制由最后一个开始, 故第一个设置的阴影将覆盖在后设置的阴影之上。当border-radius设置为0时(也是其默认值), 阴影的四角将没有弧度。当我们设置了border-radius为其他不为 0 的值时,阴影的四角也随之形成弧度。

    -

    我们通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上. box-shadow属性不会影响到盒模型的构成。

    +

    我们通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上。box-shadow属性不会影响到盒模型的构成。

    规范

    @@ -178,6 +178,6 @@

    参见

    •  {{cssxref("<color>")}} 数据类型
    • -
    • 其他与color相关的属性: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
    • 其他与 color 相关的属性:{{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • 使用 CSS 给 HTML 元素添加颜色
    diff --git a/files/zh-cn/web/css/box-sizing/index.html b/files/zh-cn/web/css/box-sizing/index.html index db43c19ab323c9..a4d9306f9179b6 100644 --- a/files/zh-cn/web/css/box-sizing/index.html +++ b/files/zh-cn/web/css/box-sizing/index.html @@ -7,7 +7,7 @@ - CSS 属性 - Reference - border-box - - border-box不包含margin + - border-box 不包含 margin - box-sizing - margin translation_of: Web/CSS/box-sizing @@ -22,25 +22,25 @@

    在 CSS 盒子模型的默认定义里,你对一个元素所设置的 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只会应用到这个元素的内容区。如果这个元素有任何的 {{Cssxref("border")}} 或 {{Cssxref("padding")}} ,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。

    -

    box-sizing 属性可以被用来调整这些表现:

    +

    box-sizing 属性可以被用来调整这些表现:

      -
    • content-box  是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    • -
    • border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
    • +
    • content-box  是默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    • +
    • border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
    -

    译者注: border-box不包含margin

    +

    译者注: border-box不包含margin

    -

    Note: 对于新的web站点,你可能希望首先将box-sizing设置为border-box,如下所示:

    +

    Note: 对于新的 web 站点,你可能希望首先将 box-sizing 设置为 border-box,如下所示:

    * { box-sizing: border-box; }

    -

    这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如: 你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。

    +

    这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如:你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。

    语法

    @@ -51,14 +51,14 @@

    属性值

    content-box
    -
    默认值,标准盒子模型。 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说,.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
    +
    默认值,标准盒子模型。 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只包括内容的宽和高,不包括边框(border),内边距(padding),外边距(margin)。注意:内边距、边框和外边距都在这个盒子的外部。 比如说,.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

    尺寸计算公式:
    width = 内容的宽度
    height = 内容的高度
    宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。
    border-box
    -
     {{Cssxref("width")}} 和 {{Cssxref("height")}} 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
    +
     {{Cssxref("width")}} 和 {{Cssxref("height")}} 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负,并且被分配到 0,使得不可能使用 border-box 使元素消失。

    尺寸计算公式:
    width = border + padding + 内容的宽度
    diff --git a/files/zh-cn/web/css/break-before/index.html b/files/zh-cn/web/css/break-before/index.html index d69f122ae16944..ee3ba8ebf3f4c6 100644 --- a/files/zh-cn/web/css/break-before/index.html +++ b/files/zh-cn/web/css/break-before/index.html @@ -7,9 +7,9 @@ ---
    {{CSSRef}}
    -

    The break-before CSS 属性定义页面,列或区域在生成的盒子之前应如何处理中断。 如果没有生成的盒子,则忽略该属性。

    +

    The break-before CSS 属性定义页面,列或区域在生成的盒子之前应如何处理中断。如果没有生成的盒子,则忽略该属性。

    -
    /* Generic break values */
    +
    /* Generic break values */
     break-before: auto;
     break-before: avoid;
     
    diff --git a/files/zh-cn/web/css/break-inside/index.html b/files/zh-cn/web/css/break-inside/index.html
    index 1a6bbf7d00bbed..065c8cc7297975 100644
    --- a/files/zh-cn/web/css/break-inside/index.html
    +++ b/files/zh-cn/web/css/break-inside/index.html
    @@ -18,11 +18,11 @@
     
     

    每一个可能的断点(可以理解为元素的边界)由三个属性来定义。前一个元素的{{cssxref("break-after")}},后一个元素的{{cssxref("break-before")}},以及当前元素的break-inside

    -

    如果需要定义一个中断点,必须遵循以下原则:

    +

    如果需要定义一个中断点,必须遵循以下原则:

    1. 如果这三个中断属性的值有一个是强制中断值(这些强制中断值包括了 always, left, right, page, column, region),那么这个属性的值就具有优先权。如果其中一个以上是这样的断点,则使用流中最新出现的元素的值。因此,break-before值优先于break-after值,而后者又优先于break-inside值。
    2. -
    3. 如果三个相关值中的任何一个是避免中断值, 相关值包括 avoid, avoid-page, avoid-region, avoid-column, 则在该点上不应用此类中断。
    4. +
    5. 如果三个相关值中的任何一个是避免中断值,相关值包括 avoid, avoid-page, avoid-region, avoid-column, 则在该点上不应用此类中断。

    一旦应用了强制中断,如果需要,可以添加软中断,但不能在元素边界上添加相应的avoid值。

    @@ -35,7 +35,7 @@

    Values

    auto
    -
    允许(既不禁止也不强制)在主框中插入任何中断(页、列或区域)。
    +
    允许 (既不禁止也不强制) 在主框中插入任何中断 (页、列或区域)。
    avoid-page
    避免主框中任何页的中断点
    avoid-column