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分析商品退单数据并找出异常商品

    文章目录 项目背景 获取数据 数据计算 统计次数 异常商品 源码地址 本文可以学习到以下内容: 使用 pandas 中的 read_sql 读取 sqlite 中的数据 获取指定的日期的周一和周日 使 ...

  2. 小白之Python-基础中的基础05

    Python-基础中的基础05 --之元组 #元组:不可变更1. 创建元组:元组必须用,表示,只加()是不行的 print 42 print (42) print 43, #这个地方会把下一行的内容打 ...

  3. （0303）《计算机体系结构 量化研究方法》PDF

    (01) https://blog.csdn.net/konghhhhh/article/details/106828402  存储器相关 (1) https://blog.csdn.net/iva_ ...

  4. python 的钩子函数

    一.什么是钩子函数 hook函数就是在一定条件下才会执行的函数,将自己实现的函数挂载到挂载点上 1. hook函数:就是我们自己实现的函数,函数类型与挂载点匹配(返回值,参数列表)2. 挂接:也就是h ...

  5. 微信退费报错：SSLHandshakeException No appropriate protocol (protocol is disabled or cipher suites are inappropr)

    微信退费报错:No appropriate protocol (protocol is disabled or cipher suites are inappropr) javax.net.ssl.S ...

  6. 手机安装APK文件，出现-应用未安装-软件包无效-安装包异常

    在项目的根的gradle.properties文件中添加 android.injected.testOnly=false 即可. 猜想:因为是在打debug包,然后这个属性变为了true?然后手机会因 ...

  7. A表某字段==B表某字段 更新A表的数据

    update mls_supplytask t1 -- 供应商认证任务 JOIN mls_sup_cert_report t2 -- 供应商认证报告 on t1.id = t2.certTaskId ...

  8. CAD中相交线怎样打断？CAD打断相交线步骤

    在CAD设计过程中,如果想要打断图纸中相交线该如何操作呢?大家第一个想到的是不是CAD打断命令?没错,CAD打断命令是可以实现的,但是过于麻烦,今天小编来给大家分享一个更简单的方法,那就是浩辰CAD软 ...

  9. vue调接口导出表格

     props:{       form:{         type:Object,         default:()=>{}       },       indexNum:{       ...

  10. git log 查看修改历史

    git log 后面可以跟文件名,表示查看对应文件的修改记录 git log --pretty=oneline --format="%h:%ad:%an:%s" -5 git lo ...