/* 线性渐变 */ background: linear-gradient(to right, #FF0000, #0000FF); /* 径向渐变 */ background: radial-gradient(circle at center, #FF0000, #0000FF);
线性渐变是从一个点到另一个点渐变,可通过调整渐变的方向和角度来控制颜色的变化方式。径向渐变是从一个点到边界的渐变,中心点由“circle”或“ellipse”控制。
CSS3渐变最大的优点是灵活性强,可以使用多个颜色进行组合,以实现更加细腻的变化效果。同时,渐变可以使用在各种Web元素上,如文本、背景色、边框等,为网页设计带来更多的创意性。
/* 多重渐变 */ background: linear-gradient(to right, #FF0000, #0000FF), radial-gradient(circle at center, #00FF00, #FFFF00); /* 文本渐变 */ background: -webkit-linear-gradient(left, #FF0000, #FF00FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
不过需要注意的是,CSS3渐变目前支持的并不是所有浏览器都一致。对于一些低版本的浏览器,渐变效果可能无法呈现出来。因此,在应用CSS3渐变时,需要特别注意浏览器的兼容性问题。