CSS中linear-gradient()

r囧r小猫 2023-02-24 08:44 2阅读 0赞

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。

//语法
    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

示例：

//不指定方向（以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:） #grad { 
      background-image: linear-gradient(red, yellow, blue);
    }
    
    //指定方向（不指定方向是从上到下，指定方向0度是从下到上，90度是从右往左转） #grad1 { 
      height: 100px;
      background-color: red; /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(0deg, red, yellow); 
    }
    
    #grad2 { 
      height: 100px;
      background-color: red; /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(90deg, red, yellow); 
    }
    
    #grad3 { 
      height: 100px;
      background-color: red; /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(180deg, red, yellow); 
    }
    
    #grad4 { 
      height: 100px;
      background-color: red; /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(-90deg, red, yellow); 
    }

参考链接：  
https://www.runoob.com/cssref/func-linear-gradient.html

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关理解CSS中BFC

故心故心故心故心小故冲啊 -------------------- 文章目录一.如何理解CSS中BFC? 二.触发BFC 三.总结 ------

Myth丶恋晨/ 2023年01月08日 02:20/ 0 赞/ 134 阅读

相关精通css和css世界_现代世界中CSS

精通css和css世界 This article is part of a web development series from Microsoft. Thank you

柔光的暖阳◎/ 2022年12月03日 10:00/ 0 赞/ 189 阅读

相关 css中的继承

css中的继承 inherit 值本例使元素的左外边距继承自父元素（）： <!DOCTYPE html> <html> <head

太过爱你忘了你带给我的痛/ 2022年11月13日 04:29/ 0 赞/ 165 阅读

相关 android 字体渐变效果怎么做,Android-LinearGradient实现TextView字体渐变的效果

可以看出，这个类提供了两个构造方法：参数说明：参数x0：表示渐变的起始点x坐标；参数y0：表示渐变的起始点y坐标；参数x1：表示渐变的终点x坐标；参数y1：

女爷i/ 2022年10月18日 04:56/ 0 赞/ 565 阅读

相关 css 中 visted

在IE6--8 中可以正常使用我在火狐搜狗浏览器中不能使<a href=“\”></a>标签

谁借莪１个温暖的怀抱￠/ 2022年08月26日 13:25/ 0 赞/ 103 阅读

相关 CSS中属性排序

From: http://markdotto.com/2011/11/29/css-property-order/ CSS property order No

╰半橙微兮°/ 2022年08月20日 06:10/ 0 赞/ 160 阅读

相关 CSS中的单位

PX(pixel)像素，相对长度单位。像素px是相对于显示器分辨率而言的特点： 1、IE无法调整那些使用px作为单位的字体大小 2、国外的大部分网站能够调整的原因在

灰太狼/ 2022年06月10日 01:59/ 0 赞/ 258 阅读

相关 css中的em

em和px的区别： em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。国外使用比较多，现在移动智能终

喜欢ヅ旅行/ 2022年06月05日 23:14/ 0 赞/ 164 阅读

相关 CSS中居中

参考文章： [https://juejin.im/post/5a7a9a545188257a892998ef][https_juejin.im_post_5a7a9a545

小鱼儿/ 2022年03月02日 12:00/ 0 赞/ 241 阅读

相关 CSS中z-index

当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值才能生效。此属性参数值越大，则被层叠在最上面。

朱雀/ 2020年10月17日 17:51/ 0 赞/ 733 阅读