css 渐变 透明间隔 条纹

CSS渐变是CSS3新增的特性之一，可以实现漂亮的颜色过渡效果。CSS渐变可分为线性渐变和径向渐变两种。下面是实现线性渐变的代码：

background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);

上述代码实现了一个七种颜色的线性渐变效果，从左到右顺序过渡。如果要设置渐变的角度，可以将第一个参数to right改成其他值，如to bottom、to top、to left等。

使用CSS渐变还可以实现透明间隔效果。下面是实现透明间隔的代码：

background: linear-gradient(to right,rgba(255,255,0) 50%,black 50%);

上述代码实现了一个白色和黑色之间的透明间隔。50%表示两种颜色的交界处，也就是透明间隔的位置。rgba(255,0)表示白色颜色的RGB值以及透明度为0，即完全透明，black表示黑色。

最后，使用CSS还可以实现条纹效果。下面是实现条纹效果的代码：

background: repeating-linear-gradient(45deg,black,black 10px,white 10px,white 20px);

上述代码实现了一个黑白相间、角度为45度的条纹效果。repeating-linear-gradient表示重复的线性渐变效果，黑色和白色交替出现，每个颜色的宽度各为10px和20px。如果要改变条纹的方向和宽度，只需调整第一个参数和后面的数字即可。