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 @@
该交互式示例网页的源码存储在GitHub中,如果你想为该网页项目做点贡献的话,请进此链接 https://github.com/mdn/interactive-examples 并给我们一个请求加入的回复。
+该交互式示例网页的源码存储在 GitHub 中,如果你想为该网页项目做点贡献的话,请进此链接 https://github.com/mdn/interactive-examples 并给我们一个请求加入的回复。
fixed
local
scroll
p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); @@ -56,7 +56,7 @@-CSS样式表
}
<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 @@规
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')}} | 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 @@
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")}}属性来决定。 |
CSS版本 | +CSS 版本 | 状态 | 评注 |
---|
笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick
, 在单独文档中这些值内部是恒定不变的。
笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick
, 在单独文档中这些值内部是恒定不变的。
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 属性
@@ -97,7 +97,7 @@border-radius
允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个 (椭) 圆与边框的交集形成圆角效果。
例如:
+例如:
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 @@浏览器兼容性
参考
-
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 @@- 其他样式相关边框属性: {{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")}}.
数值
笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick
, 在单独文档中这些值内部是恒定不变的。
笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick
, 在单独文档中这些值内部是恒定不变的。
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
的时候。
border-top-left-radius
用来设置元素左上角的圆角效果。这段圆弧(角)可以是圆或椭圆的一部分。如果其中有一个值为0,那么将无圆角效果(见border-top-left-radius取值方式
)。
border-top-left-radius
用来设置元素左上角的圆角效果。这段圆弧(角)可以是圆或椭圆的一部分。如果其中有一个值为 0,那么将无圆角效果(见border-top-left-radius取值方式
)。
盒模型的背景,可以是一张图片或一种颜色,会在边框处被剪裁,更甚至可以是一个圆;剪切的额外定位通过另一个CSS属性"background-clip"来定义。
+盒模型的背景,可以是一张图片或一种颜色,会在边框处被剪裁,更甚至可以是一个圆;剪切的额外定位通过另一个 CSS 属性"background-clip"来定义。
-border-top-right-radius属性设置元素的右上角
弧形,这个圆弧可能是一个椭圆,或者其中一个值是0的话,就是没有圆弧,换句话就是说拐角是方形的。
border-top-right-radius属性设置元素的右上角
弧形,这个圆弧可能是一个椭圆,或者其中一个值是 0 的话,就是没有圆弧,换句话就是说拐角是方形的。
一个背景通常以一张图片或者颜色开始,在边框处被剪切,更甚至就是一个圆形;剪切的额外定位通过一个CSS属性"background-clip"来定义。
+一个背景通常以一张图片或者颜色开始,在边框处被剪切,更甚至就是一个圆形;剪切的额外定位通过一个 CSS 属性"background-clip"来定义。
-{{cssinfo}}
@@ -44,7 +44,7 @@之上:
+之上:
边框半径相关的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 @@选取以上可用关键字之一作为 {{cssxref("border-style")}} 的 border-top-style 属性的值.
+选取以上可用关键字之一作为 {{cssxref("border-style")}} 的 border-top-style 属性的值。
css属性 border-top-width
是用于设置盒模型的上边框的宽度
css 属性 border-top-width
是用于设置盒模型的上边框的宽度
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 @@
提示:规范并没有规定关键字的实际值故在不同浏览器效果是不一样的,但显然thin≤medium≤thick,并且值在单个文档中是恒定的
+提示:规范并没有规定关键字的实际值故在不同浏览器效果是不一样的,但显然 thin≤medium≤thick,并且值在单个文档中是恒定的
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 属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。
可以使用下面列出的一个,两个或三个值来指定border
属性。 值的顺序无关紧要。
可以使用下面列出的一个,两个或三个值来指定border
属性。值的顺序无关紧要。
注意:如果边框的样式未定义,它将不可见。 这是因为样式默认为none。
+注意:如果边框的样式未定义,它将不可见。这是因为样式默认为 none。
transparent
的支持,因为{{cssxref("<color>")}}已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。none
).none
).
加入inherit
关键字。
- 接受transparent作为有效的颜色值。
position
设置为absolute
或fixed
时,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
属性无效。auto
height: auto
,将基于内容需要的高度设置宽度;如果top
也为auto
的话,元素的垂直位置就是它假如作为静态(即static)元素时该在的位置。height: auto
,将基于内容需要的高度设置宽度;如果top
也为auto
的话,元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。top
也为auto
的话,元素将不会有偏移。下面的例子分别展示了bottom
属性在position
为absolute
和fixed
的不同行为.
下面的例子分别展示了bottom
属性在position
为absolute
和fixed
的不同行为。
slice
clone
: no-repeat
的背景图片仍然可能重复多次.: no-repeat
的背景图片仍然可能重复多次。... 效果:
+... 效果:
-添加 box-decoration-break: clone
样式之后:
添加 box-decoration-break: clone
样式之后:
-webkit-box-decoration-break: clone; box-decoration-break: clone;-
... 效果:
+... 效果:
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 ---这是原始的css弹性布局草案的一个属性,已经被最新的标准替代。 查看 flexbox 了解现行标准。
+这是原始的 css 弹性布局草案的一个属性,已经被最新的标准替代。查看 flexbox 了解现行标准。
box-orient
CSS 属性用来设置一个元素是水平还是垂直布局其内容。
{{CSSRef}}
-CSS box-shadow
属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
CSS box-shadow
属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
你几乎可以在任何元素上使用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
关键字。inset
inset
,默认阴影在边框外,即阴影向外扩散。inset
关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。inset
关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
<offset-x>
<offset-y>
<offset-x>
设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。 <offset-y>
设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。可用单位请查看 {{cssxref("<length>")}} 。<blur-radius>
或<spread-radius>
则有模糊效果。需要考虑 inset
<offset-x>
设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。 <offset-y>
设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。可用单位请查看 {{cssxref("<length>")}} 。<blur-radius>
或<spread-radius>
则有模糊效果。需要考虑 inset
<blur-radius>
对于长而直的阴影边缘,它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域,过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 (译者注:对此有兴趣的可以了解下数字图像处理的模糊算法。)
<spread-radius>
inset
inset
<color>
将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 同较长的列表。
此处应翻译为“正规文法”或“正则文法”。对此有兴趣的可以了解下 编译原理 的 “正规文法”
+此处应翻译为“正规文法”或“正则文法”。对此有兴趣的可以了解下 编译原理 的“正规文法”
第一个例子中,包括了三种shadows,内置的阴影, 常规的下沉阴影, 和一个2个像素宽度的border式的阴影 (可以用 {{cssxref('outline')}} 来替代第三种)。
+第一个例子中,包括了三种 shadows,内置的阴影,常规的下沉阴影,和一个 2 个像素宽度的 border 式的阴影 (可以用 {{cssxref('outline')}} 来替代第三种)。
{{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
属性不会影响到盒模型的构成。
在 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
一些专家甚至建议所有的 Web 开发者们将所有的元素的box-sizing都设为border-box。
+一些专家甚至建议所有的 Web 开发者们将所有的元素的 box-sizing 都设为 border-box。
Note: 对于新的web站点,你可能希望首先将box-sizing设置为border-box,如下所示:
+Note: 对于新的 web 站点,你可能希望首先将 box-sizing 设置为 border-box,如下所示:
* { box-sizing: border-box; }
-这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如: 你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。
+这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如:你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。
content-box
.box {width: 350px; border: 10px solid black;}
在浏览器中的渲染的实际宽度将是 370px。.box {width: 350px; border: 10px solid black;}
在浏览器中的渲染的实际宽度将是 370px。width
= 内容的宽度height
= 内容的高度border-box
.box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。.box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负,并且被分配到 0,使得不可能使用 border-box 使元素消失。width
= border + padding + 内容的宽度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
。如果需要定义一个中断点,必须遵循以下原则:
+如果需要定义一个中断点,必须遵循以下原则:
- 如果这三个中断属性的值有一个是强制中断值(这些强制中断值包括了
-always
,left
,right
,page
,column
,region
),那么这个属性的值就具有优先权。如果其中一个以上是这样的断点,则使用流中最新出现的元素的值。因此,break-before
值优先于break-after
值,而后者又优先于break-inside
值。- 如果三个相关值中的任何一个是避免中断值, 相关值包括
+avoid
,avoid-page
,avoid-region
,avoid-column
, 则在该点上不应用此类中断。- 如果三个相关值中的任何一个是避免中断值,相关值包括
avoid
,avoid-page
,avoid-region
,avoid-column
, 则在该点上不应用此类中断。一旦应用了强制中断,如果需要,可以添加软中断,但不能在元素边界上添加相应的
@@ -35,7 +35,7 @@avoid
值。Values
auto
avoid-page
avoid-column