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-slice/index.html | 108 ++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 files/zh-cn/web/css/border-image-slice/index.html (limited to 'files/zh-cn/web/css/border-image-slice') diff --git a/files/zh-cn/web/css/border-image-slice/index.html b/files/zh-cn/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..2f7922d9e0 --- /dev/null +++ b/files/zh-cn/web/css/border-image-slice/index.html @@ -0,0 +1,108 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

概要

+ +

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

+ +


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

+ +

上图说明了每个区域的位置。

+ + + +

 

+ +

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

+ +

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

+ +

语法

+ +
/* 所有的边 */
+border-image-slice: 30%;
+
+/* 垂直方向 | 水平方向 */
+border-image-slice: 10% 30%;
+
+/* 顶部 | 水平方向 | 底部 */
+border-image-slice: 30 30% 45;
+
+/* 上 右 下 左 */
+border-image-slice: 7 12 14 5;
+
+/* 使用fill（fill可以放在任意位置） */
+border-image-slice: 10% fill 7 12;
+
+/* Global values */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

值

+ +
+
slice
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the four slicing lines. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
horizontal
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two slicing lines corresponding to the horizontal edges, the right and the left ones. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
vertical
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two slicing lines corresponding to the vertical edges, the top and the bottom ones. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
top
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the top slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
bottom
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the bottom slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
right
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the right slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
left
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the left slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
fill
+
Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
+
inherit
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Initial defintion
+ +

浏览器兼容性

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

See also

+ + -- cgit v1.2.3-54-g00ecf