首页 > 网站 > WEB开发 > 正文

字体颜色渐变和边框渐变的一个方法

2024-04-27 15:06:20
字体:
来源:转载
供稿:网友
字体渐变:background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(234, 101, 10, 1)), to(rgba(246, 199, 156, 1)));//起作用关键的样式-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

边框渐变:先做一个白色的小一点的div,然后用伪类做了一个大一点的彩色的,让他低一点被盖住,就会露出一个彩色渐变的框,缺点是框内是用颜色填充的,不是透明的(这是2.5日),代码:

.test {position: relative;margin: auto;height: 80px;width: 200px;border-radius: 40px;background-color: #fff;&:before {content: '';background: linear-gradient(to right, red, blue) no-repeat;position: absolute;top: -5px;left: -5px;height: 90px;width: 210px;border-radius: 45px;z-index: -1;}}

然后在2.6日的今天发现,直接用border-img就可以实现边框渐变

border-image: linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%;border-image: -webkit-linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%;

border-image: linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%;border-image: -webkit-linear-gradient( 330deg, #4f70a9 , #bcad80) 40% 1%;
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表