CSS上下透明渐变 |css截取图标

/* 设置渐变背景为线性渐变 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

上述代码中，大家使用linear-gradient函数设置了一个从顶部到底部的线性渐变，其参数to bottom表示从上到下渐变。接着大家使用rgba来设置颜色值，其中最后一个参数表示颜色的透明度，0表示完全透明，1表示完全不透明。因此，大家使用rgba(255, 255, 255, 0)表示白色完全透明，而使用rgba(255, 255, 255, 1)表示白色完全不透明。

如果大家想设置一个向上的渐变，只需要将参数改为to top即可。如果要设置左右渐变，可以使用to left或to right，而对角渐变则可使用to top left、to top right、to bottom left和to bottom right等参数。

在实际应用中，大家可以将这种效果用于各种元素上，例如半透明边框可以使用border-image实现，如下所示：

/* 设置半透明边框 */
border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 1 stretch;

通过使用border-image属性，大家可以将边框设置为一个线性渐变，border-image的第一个参数就是大家设置的渐变效果，第二个参数表示边框的宽度，第三个参数控制边框的平铺方式。

总之，CSS上下透明渐变是一种常用而实用的效果，大家可以灵活运用它来实现各种需求并提升页面的视觉效果。