CSS3 实现边框圆角渐变色&&渐变文字效果
warning:
这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。
/* 定义一个圆角渐变色的边框 */
.border-gradient {
border: 2px solid transparent;
border-radius: 30px;
background-clip: padding-box;
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
transition: background-position 0.5s ease, color 0.5s ease;
}
/* 定义一个文字渐变色效果 */
.text-gradient {
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}这段代码展示了如何使用CSS3来实现一个圆角渐变色的边框，以及一个文字渐变色的效果。border-gradient类用于创建边框的圆角渐变色，而text-gradient类用于创建文本的渐变色效果。注意，为了让文本渐变色生效，某些浏览器可能需要前缀支持，例如-webkit-background-clip: text;用于Webkit内核的浏览器。
评论已关闭