CSS渐变是在CSS3中新增了的重要特性,可以实现背景颜色或是文本的渐变效果。上下左右同时渐变是其中一种常用的渐变方式。background: linear-gradient(to bottom, #
CSS渐变是在CSS3中新增了的重要特性,可以实现背景颜色或是文本的渐变效果。上下左右同时渐变是其中一种常用的渐变方式。
background: linear-gradient(to bottom, #FF0000, #0000FF); background: linear-gradient(to top, #FF0000, #0000FF); background: linear-gradient(to left, #FF0000, #0000FF); background: linear-gradient(to right, #FF0000, #0000FF);
在上述代码中,我们使用了linear-gradient函数来定义渐变效果。to bottom表示从上到下,to top表示从下到上,to left表示从右到左,to right表示从左到右。 #FF0000代表红色,#0000FF代表蓝色,因此上述代码将实现从红色渐变到蓝色。
我们还可以将多个方向进行组合,实现更为丰富的渐变效果。例如:
background: linear-gradient(to top left, #FF0000, #0000FF); background: linear-gradient(to top right, #FF0000, #0000FF); background: linear-gradient(to bottom left, #FF0000, #0000FF); background: linear-gradient(to bottom right, #FF0000, #0000FF);
其中,to top left表示从右下方向左上方渐变,to top right表示从左下方向右上方渐变,to bottom left表示从右上方向左下方渐变,to bottom right表示从左上方向右下方渐变。同样,#FF0000代表红色,#0000FF代表蓝色。
粉丝
0
关注
0
收藏
0