CSS linear-gradient()线性渐变

学习最好的方法,就是把你知道的告诉别人

元素的背景颜色并不局限单一的颜色,我们还可以通过给元素的背景色设置过渡,也就是渐变,让我们的元素的颜色变得更加美观。

可以通过 linear-gradient()实现渐变,这是它的语法:

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);

  • gradient_direction:背景的渐变角度,90deg代表垂直渐变,剩下的指定渐变颜色的先后顺序。

请看例子:

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

这是效果图:


效果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • -webkit-linear-gradient线形渐变详解 CSS3发布很久了,现在在国外的一些页面上常能看到他的...
    魏魏魏_1500阅读 15,675评论 0 3
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,539评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,818评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,556评论 0 7
  • 在总公司招聘了一整天!现在的孩子们时间观念太差了!不过有几个确实守时,不错,继续关注!晚上到项目上开会到7点!开头...
    浦大魔王76阅读 1,131评论 0 1