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 -webkit-border-before property #25617

Merged
merged 4 commits into from
Feb 8, 2025
Merged
Changes from 3 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
77 changes: 47 additions & 30 deletions files/zh-cn/web/css/-webkit-border-before/index.md
Original file line number Diff line number Diff line change
@@ -1,66 +1,81 @@
---
title: -webkit-border-before
slug: Web/CSS/-webkit-border-before
l10n:
sourceCommit: 9e521726ed1d605756b73a788eaa55498d540821
---

{{CSSRef}}{{Non-standard_header}}

**`-webkit-border-before`** [CSS](/zh-CN/docs/Web/CSS) 属性 是一种用于简写的属性。它用于在样式表的单个位置设置各个起始边框属性值。
**`-webkit-border-before`** [CSS](/zh-CN/docs/Web/CSS) 属性是一个用于在样式表中统一设置逻辑块起始边框各属性值的简写属性。

## 组成属性

该属性是以下 CSS 属性的简写:

- {{cssxref("-webkit-border-before-color")}}
- {{cssxref("-webkit-border-before-style")}}
- {{cssxref("-webkit-border-before-width")}}

## 语法

```css
/* Border values */
/* 边框值 */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

/* Global values */
/* 全局值 */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;
```

`-webkit-border-before` 可以使用以下一个或多个值:

1. {{cssxref("-webkit-border-before-width")}}
2. {{cssxref("-webkit-border-before-style")}}
3. {{cssxref("-webkit-border-before-color")}}.
### 值

它根据元素的书写模式、方向以及文本方向映射到 Border 上。对应到四个边框属性{{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}或{{cssxref("border-left")}} ,具体取决于 {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}}三个属性定义的值。
以下一个或多个,顺序不限:

这个属性和 {{cssxref("-webkit-border-after")}}、{{cssxref("-webkit-border-start")}}、{{cssxref("-webkit-border-end")}}三个属性用来定义元素的边界。
- `<'border-width'>`
- : 参阅 {{cssxref("border-width")}}
- `<'border-style'>`
- : 参阅 {{cssxref("border-style")}}
- `<'color'>`
- : 参阅 {{cssxref("color")}}

此属性在相关标准上的命名为 {{cssxref("border-block-start")}}.
## 描述

{{cssinfo}}
`-webkit-border-before` 属性根据元素的书写模式、方向性和文本方向映射到物理边框。它对应于 {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}} 或 {{cssxref("border-left")}} 属性,具体取决于为 {{cssxref("writing-mode")}}、{{cssxref("direction")}} 和 {{cssxref("text-orientation")}} 定义的值。

## 语法
它与 {{cssxref("-webkit-border-after")}}、{{cssxref("-webkit-border-start")}} 和 {{cssxref("-webkit-border-end")}}(这些属性定义了元素的其他边框)相关。

### 可选择的值
该属性的标准跟踪等效属性是 {{cssxref("border-block-start")}}。

按以下顺序,一个或多个值
## 形式定义

- `<'border-width'>`
- : 参考 {{cssxref("border-width")}}
- `<'border-style'>`
- : 参考 {{cssxref("border-style")}}
- `<'color'>`
- : 参考 {{cssxref("color")}}
{{CSSInfo}}

### 形式语法
## 形式语法

{{csssyntax}}
```plain
-webkit-border-before =
<'border-width'> || <'border-style'> || <color>
```

## 示例

### HTML
### 对垂直文本应用边框

#### HTML

```html
<div>
<p class="exampleText">Example text</p>
<p class="exampleText">示例文本</p>
</div>
```

### CSS
#### CSS

```css
div {
Expand All @@ -75,11 +90,13 @@ div {
}
```

{{EmbedLiveSample("示例", 140, 140)}}
#### 结果

{{EmbedLiveSample("对垂直文本应用边框", 140, 140)}}

## 规范

尽管它和 {{cssxref("border-block-start")}} 属性有关,但现在并不存在与任何一标准规范
不属于任何标准,但它与标准跟踪的 {{cssxref("border-block-start")}} 属性相关

## 浏览器兼容性

Expand All @@ -88,5 +105,5 @@ div {
## 参见

- {{cssxref("border-block-start")}}
- The mapped physical properties: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, and {{cssxref("border-left")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
- 映射的物理属性:{{cssxref("border-top")}}{{cssxref("border-right")}}{{cssxref("border-bottom")}} {{cssxref("border-left")}}
- {{cssxref("writing-mode")}}{{cssxref("direction")}}{{cssxref("text-orientation")}}
Loading