Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn]: update the translation of css-border-image-slice #23659

Merged
merged 4 commits into from
Sep 19, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions files/zh-cn/web/css/border-image-slice/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: border-image-slice
slug: Web/CSS/border-image-slice
l10n:
sourceCommit: b2af4eb16dd4c399ed81f67efd49777fa6ae9030
---

{{CSSRef}}
Expand All @@ -9,7 +11,7 @@ slug: Web/CSS/border-image-slice

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

切分过程会将图像分割为 9 个区域:四个角、四个边(edges)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。
切分过程会将图像分割为 9 个区域:四个角、四个边(edge)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。

![由 border-image 或 border-image-slice 属性定义的九个区域](border-image-slice.png)

Expand Down Expand Up @@ -51,8 +53,8 @@ border-image-slice: unset;

- 仅指定了**一**个位置(1 个值)时,创建的(上下左右)四个切片将具有相同的宽度/高度。
- 当指定了**两**个位置(2 个值)时,第一个值表示垂直方向的两个切片的高度(即 **top** 与 **bottom**),第二个值表示水平方向两侧切片的宽度(即 **left** 和 **right**)。
- 当指定了**三**个位置(3 个值)时,第一个值表示顶部切片的高度(即 **top**),第二个值表示水平方向两侧切片的宽度(即 **left** 和 **right**),第三个值则表示底部切片的高度(即 **buttom**)。
- 当指定了**四**个位置(4 个值)时,这四个值则分别对应 **top**、**right**、**buttom**、**left**(上、右、下、左)四个切片的宽度/高度。
- 当指定了**三**个位置(3 个值)时,第一个值表示顶部切片的高度(即 **top**),第二个值表示水平方向两侧切片的宽度(即 **left** 和 **right**),第三个值则表示底部切片的高度(即 **bottom**)。
- 当指定了**四**个位置(4 个值)时,这四个值则分别对应 **top**、**right**、**bottom**、**left**(上、右、下、左)四个切片的宽度/高度。

可选值 `fill` 可放在上面声明的值的末尾。

Expand Down Expand Up @@ -103,12 +105,12 @@ border-image-slice: 30;

<ul>
<li>
<label for="width">slide to adjust <code>border-width</code></label>
<label for="width">滑动以调整 <code>border-width</code></label>
<input type="range" min="10" max="45" id="width" />
<output id="width-output">30px</output>
</li>
<li>
<label for="slice">slide to adjust <code>border-image-slice</code></label>
<label for="slice">滑动以调整 <code>border-image-slice</code></label>
<input type="range" min="10" max="45" id="slice" />
<output id="slice-output">30</output>
</li>
Expand Down Expand Up @@ -175,4 +177,5 @@ sliceSlider.addEventListener("input", () => {

## 参见

- [图解说明 1 到 4 个值的语法](/zh-CN/docs/Web/CSS/Shorthand_properties#tricky_edge_cases)
- [图解说明 1 到 4 个值的语法](/zh-CN/docs/Web/CSS/Shorthand_properties#棘手的边界情况)
- MDN 博客上的 [CSS 中的边框图像:Interop 2023 的关键关注领域](/en-US/blog/border-images-interop-2023/)(2023)