From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/border-image-width/index.html | 133 ++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/zh-cn/web/css/border-image-width/index.html (limited to 'files/zh-cn/web/css/border-image-width') diff --git a/files/zh-cn/web/css/border-image-width/index.html b/files/zh-cn/web/css/border-image-width/index.html new file mode 100644 index 0000000000..2af817da2b --- /dev/null +++ b/files/zh-cn/web/css/border-image-width/index.html @@ -0,0 +1,133 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

CSS属性 border-image-width 指定了 边界图像 (border image) 的宽度

+ +
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
+ + + +

如果本属性值大于元素的 {{cssxref("border-width")}}，边界图像将会向 padding 边缘延展

+ +

语法

+ +
/* 关键字 */
+border-image-width: auto;
+
+/* 长度 */
+border-image-width: 1rem;
+
+/* 百分比 */
+border-image-width: 25%;
+
+/* 数值 */
+border-image-width: 3;
+
+/* 垂直 | 水平 */
+border-image-width: 2em 3em;
+
+/* 上 | 横向 | 下 */
+border-image-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+border-image-width: 5% 2em 10% auto;
+
+/* 全局值 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

border-image-width 属性的值可用以下方式进行设定：

+ + + +

取值

+ +
+
<长度-百分比>
+
边界的宽度, 可按 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 指定。百分比是相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负。
+
<数值>
+
边框宽度，指定为 {{cssxref("border-width")}} 的相应倍数，不能为负。
+
auto
+
将等同于内部对应的 {{cssxref("border-image-slice")}} 的宽或高（可用的话）。如果图像没有需要的相应的属性，将相对于 border-width 进行指定。
+
+ +

正式定义

+ +

{{CSSInfo}}

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

Tiling a border image

+ +

示例使用了下方 90*90 像素的 ".png" 图像。

+ +

+ +

因此，每个圆圈为 30*30 像素。

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

结果

+ +

{{EmbedLiveSample('Tiling_a_border_image', 200, 240)}}

+ +

技术规格

+ + + + + + + + + + + + + + + + +
CSS版本状态评注
{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-image-width")}}

-- cgit v1.2.3-54-g00ecf