[分享]css3左中右渐变

CSS3的渐变属性可以实现左、中、右渐变的效果，让网页更加美观。其中，左渐变表示从左到右逐渐改变颜色，中渐变表示从中间开始逐渐改变颜色，右渐变表示从右到左逐渐改变颜色。/左渐变/ .backgroun...

CSS3的渐变属性可以实现左、中、右渐变的效果，让网页更加美观。其中，左渐变表示从左到右逐渐改变颜色，中渐变表示从中间开始逐渐改变颜色，右渐变表示从右到左逐渐改变颜色。

/*左渐变*/
.background {
  background: linear-gradient(to right, #D4D4D4, #F2F2F2);
}
/*中渐变*/
.background {
  background: linear-gradient(to right, #D4D4D4 0%, #F2F2F2 50%, #D4D4D4 100%);
}
/*右渐变*/
.background {
  background: linear-gradient(to left, #D4D4D4, #F2F2F2);
} 

以上代码中，linear-gradient是CSS3的渐变函数，to right表示从左到右渐变，to left表示从右到左渐变，0%和100%分别表示渐变的起点和终点，50%则表示中间位置的颜色渐变值，#D4D4D4和#F2F2F2则是渐变的颜色值。

通过CSS3的渐变属性，我们可以轻松实现左、中、右渐变的效果，让网页设计更加灵活多样，吸引更多用户的关注。