css上下左右同时渐变

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代表蓝色。