---
id: 587d78a5367417b2b2512ad7
title: Use a CSS Linear Gradient to Create a Striped Element
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS线性渐变来创建条带元素
---
## Description
repeating-linear-gradient()
函数与linear-gradient()
非常相似,主要区别在于它重复指定的渐变图案。 repeating-linear-gradient()
接受各种值,但为简单起见,您将在此挑战中使用角度值和颜色停止值。角度值是梯度的方向。颜色停止类似于标记转换发生位置的宽度值,并且以百分比或像素数给出。在代码编辑器中演示的示例中,渐变以0像素处的yellow
开始,在距离开始40像素处混合成第二种颜色blue
。由于下一个颜色停止也是40像素,因此渐变立即变为第三颜色green
,其本身混合为第四颜色值red
,因为距离渐变的开始是80像素。对于这个例子,它有助于将颜色停止视为每两种颜色混合在一起的对。 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
如果每两个颜色停止值是相同的颜色,则混合不明显,因为它在相同的颜色之间,然后是硬转换到下一个颜色,所以你最终得到条纹。
## Instructions
通过更改repeating-linear-gradient()
以使用45deg
度的渐变角度来45deg
,然后将前两个颜色停止设置为yellow
,最后将第二个两个颜色停止为black
。
## Tests
```yml
tests:
- text: repeating-linear-gradient()
应为45度。
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the repeating-linear-gradient()
should be 45deg.");'
- text: repeating-linear-gradient()
不应再为90度
testString: 'assert(!code.match(/90deg/gi), "The angle of the repeating-linear-gradient()
should no longer be 90deg");'
- text: 0像素处的颜色停止应为yellow
。
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be yellow
.");'
- text: 40像素的一个颜色停止应为yellow
。
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be yellow
.");'
- text: 40像素的第二个色标应为black
。
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be black
.");'
- text: 80像素的最后一个色标应为black
。
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be black
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```