1.渐变从左到右

background: linear-gradient(to right,#000,#fff);

2.渐变从上到下

background: linear-gradient(tobottom,#000,#fff);

3.角度渐变（60°）

background: linear-gradient(60deg, #000, #fff);

4.径向渐变

background: radial-gradient(rgba(235,116,63,.9),rgba(235,116,63,.3),rgba(235,116,63,0),rgba(235,116,63,0));

说明，背景渐变可以使用#fff，也可以使用带透明度的rgba(255,255,255..3);

css 背景渐变的更多相关文章

  1. CSS——背景渐变

    在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很 ...

  2. CSS背景渐变支持transition过渡效果

    background-image 是不支持 CSS3 的transition过渡效果的,而CSS3 gradient 渐变作为背景图片存在的时候, 下面的CSS不会有过渡效果 <div clas ...

  3. Css背景渐变

    语法: background:linear-gradient( 渐变方向,起点颜色,终点颜色 ) 参数说明: 渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而 ...

  4. css背景渐变兼容（兼容所有ie）

    css3里面一行可以搞定的事,换到ie里,要用滤镜,在网上找了很多,不知道什么原因都没用,终于找到个有用的,放在这里,方便大家用,自己也找得到~ 完整型代码,兼容所有浏览器: ​background: ...

  5. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  6. CSS3魔法堂：背景渐变（Gradient）

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  7. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  8. 用jq实现鼠标移入按钮背景渐变其他的背景效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. DIY cnblog——背景渐变切换

    进来的小伙伴应该已经看过了我的博客样式,但还是贴张图先: 先大致说一下实现的思路,然后把代码贴出来供小伙伴们参考. 由于不是特别技术性的文章,格式就放宽松一点,跟着意识流走吧. 先跟大家分享一个渐变背 ...

  10. CSS——背景及应用

    CSS 可以添加背景颜色和背景图片,以及进行图片设置. none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中 ...

随机推荐

  1. Python的入门学习Day 19~21——form”夜曲编程“

    ..Day 19 time:2021.8.16. ​ 很神奇地,编程和数学渐渐有了交集--今天学习了函数,连模样都像 f(x) 的形式.比较有区分度的是,在P里,"x"被称为&qu ...

  2. Pycharm报错：Error running ‘‘: Cannot run program “\python.exe“ (in directory ““)系统找不到指定文件夹？已解决！

    问题报错 报错原因:我修改的工程的名称/或者移动了工程位置,运行导致找不到之前的运行路径 解决办法1.在该项目文件夹下找到一个叫.idea的文件夹.(若没有,选择显示隐藏项目,可能被隐藏了)PyCha ...

  3. Python学习笔记（五）if分支语句

    一.if语法 示例: 1 money = int(input('请输入余额:')) 2 if money >= 5: 3 print('买得起!') 4 5 if True: 6 print(' ...

  4. pl/sql导出表结构的方法步骤

    转载:pl/sql怎么导出表结构-pl/sql导出表结构的方法步骤-下载吧 (xiazaiba.com) PL/SQL Developer是一个专为Oracle数据库开发存储程序单元的集成开发环境,用 ...

  5. gRPC 入门（一）

    前言 在学习 gRPC 之前,先学习 protobufu 协议,简单的来理解,我们可以使用他来定义 消息 和 服务.然后你只需要实现服务即可,剩下的东西,gRPC 会帮你自动完成. protobufu ...

  6. .ToList()前的OrderBy是起不到排序效果的【未解决】

    废话也不说了,直接上图 思考:很多时候我们都想通过Linq的OrderBy给数据集进行排序,这样确实是有效的,但是如果后面将数据集改成了ToList()的话是又会重新打乱排序方式的! 所以有个疑问需要 ...

  7. C++快速求解最大公因数 | gcd库函数

    1.介绍 gcd全称 :greatest common divisor 使用 __gcd( int x1, int x2 ) 函数可以高效.迅速得到x1, x2两个数的最大公因数.省去手写底层代码,专 ...

  8. e网通公告

    title:用户须知titleend<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \&qu ...

  9. DAC双通道模板

    #define DAC_C #include "dac.h" float DAC_DispenseA; float DAC_DispenseB; void MyDAC_Init(v ...

  10. Kotlin属性委托

    业务定义 对于属性,我们可以读取(get)和赋值(set),在Java中会定义get和set方法来操作属性,Kotlin的属性建议直接操作,一些业务的要求会对属性有额外的功能需求,在Java中会在ge ...