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. vue+vant-ui小程序，微信小程序自定义导航栏（适配刘海屏）

    整理一下微信小程序自定义导航栏和刘海屏适配问题 1.首先在根据官方文档,我们在小程序修改 app.json 中的 window 的属性 "navigationStyle": &qu ...

  2. ES6-Promise上

    一.Promise作用:解决回调地狱问题 transitionend是过渡结束事件,只要过渡结束就会触发: 回调地狱:指的是层层嵌套的回调函数,代码看起来非常晕 <!DOCTYPE html&g ...

  3. df -T 和 du 统计的内存不一致

    1.问题原因 客户反馈,df -T 查看到挂载到flash文件的emmc使用了6G左右,但是在flash下看到du -h 只用了2G左右,客户疑问,还有4G去哪儿了? 2.问题怀疑方向 1.怀疑启动阶 ...

  4. Winfrom ComboBox中的性能探索

    在为Control维护元素列表的过程中,会不可避免的造成性能损耗,我们接下来要探究的就是哪种方式才是我们的最优解. 方案比较 以ComboBox为例,常见的方式一共有两种:Add.AddRange. ...

  5. C# 子类与父类互转注意项

    昨晚在处理父类与子类相互转换时,想把父类转换子类对象,发现编译不通过 ,类定义如下: public interface IPeople { int Age { get; set; } string N ...

  6. C#判断窗体是否打开,并获取聚焦、未打开则新建一个子窗体

    在桌面程序开发会遇到的情况,托盘功能或者是小功能弹窗问题: 现有一个主窗体有子窗体 子窗体每个都可以新建其他窗体问题:新建子窗体时怎么判断子窗体是否打开?若子窗体打开则置顶获取焦点.若未打开则新建一个 ...

  7. RepVGG：一个结构重参数化网络

    ​  本文来自公众号"AI大道理" ResNet.DenseNet 等复杂的多分支网络可以增强模型的表征能力,使得训练效果更好.但是多分支的结构在推理的时候效率严重不足. 看起来二 ...

  8. java中post发送json格式数据

    /** * 发送post请求 * @param URL 数据发送地址 * @param json json格式数据内容 * @param headParams 请求头内容 * @return 请求结果 ...

  9. tensorboard 2.0可视化 —浏览器中输入http://ip:6006 - 无法访问此网站——有效解决

    https://blog.csdn.net/sinat_28442665/article/details/108975276

  10. 一 MySQL的架构与历史1.1--1.4

    1.1 MySQL逻辑架构 最上层的服务并不是 MySQL 所独有的,大多数基于网络的客户端/服务器的工具或者服务都有类似的架构.比如连接处理.授权认证.安全等等. 第二层架构是MySQL比较有意思的 ...