常用的CSS渐变样式

一枕黄粱-web

于 2023-07-28 18:34:09 发布

阅读量631

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/jstljspservlet/article/details/131985866

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边框渐变
方案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;