css - 为什么 border-image-width 在 border-image 形式语法中出现两次？

Question

Here是 W3C 规范定义 border-image 属性的方式。
Here MDN 是如何解释 border-image 属性的。

在它们中，正式语法是:

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

我明白了什么|| , | , ?意思是。

为什么 border-image-width 在形式语法中出现两次？

Answer 1

让我们将该部分分解:

[ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]?

属性在括号内 ( [ ] )。这意味着他们是一组。

单条 ( | ) 将组分为两部分:

1. <‘border-image-width’>
2. <‘border-image-width’>? / <‘border-image-outset’>

单条是回答您问题的关键因素。

它定义了border-image-width作为两个不同用例的一部分。它可以单独出现或与 border-image-outset 一起出现.根据单个条的定义，这些情况中只会发生其中一种。

? 之后的问号 ( border-image-width )括号后表示它可以出现零次或一次。

因此这些是该组的有效选项:

• border-image-width
• border-image-outset
• border-image-width & border-image-outset
• 没有

真正理解为什么border-image-width需要两次，尝试只用一个 border-image-width 复制这四个选项.