常用的CSS渐变样式

最新推荐文章于 2025-01-08 11:43:25 发布

原创最新推荐文章于 2025-01-08 11:43:25 发布 · 652 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章介绍了两种创建边框渐变的方法，一种利用`background-image`和`border-radius`支持圆角，另一种使用`border-image`但不支持圆角。在尝试使用`clip-path`解决圆角问题时，可能会导致渐变色的缺失。同时提到了字体颜色和背景色的线性渐变实现。

边框渐变
方案1：边框渐变( 支持圆角)

   width: 726px;
   height: 144px;
   border-radius: 24px;
   border: 5px solid transparent;
   background-clip: padding-box, border-box; 
   background-origin: padding-box, border-box; 
   background-image: linear-gradient(to right, #fff, #fff), linear-gradient(100deg, rgba(86, 199, 255, 1), rgba(255, 255, 255, 0));

效果如图：在这里插入图片描述
边框渐变（border-image不支持圆角）

	width: 726px;
    height: 144px;
    border-radius: 24px;
    border: 5px solid;
    background: #fff;
    border-image: linear-gradient(100deg, rgba(86, 199, 255, 1), rgba(255, 255, 255, 0)) 5 5;