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. MassTransit - .NET Core 的分布式应用程序框架

    简介 MassTransit 是一个免费的.开源的.NET 分布式应用程序框架.MassTransit 使创建应用程序和服务变得容易,这些应用程序和服务利用基于消息的松散耦合异步通信来实现更高的可用性 ...

  2. 为什么 .NET应用推荐使用 await、async异步编程？

    前言 1.什么是async/await? await和async是.NET Framework 4.5框架.C#5.0语法里面出现的技术,目的是用于简化异步编程模型. 2.async和await的关系 ...

  3. 简易Map模板

    非红黑树,排序+二分搜索,查找修改O(logN),插入删除O(N) #ifndef MAP_H #define MAP_H #include "main.h" /*-------- ...

  4. html的table多级表头表格的代码

    1,两级表头的代码 <html> <head> <title>多层表头</title> <link rel="stylesheet&qu ...

  5. 一个MySQL双引号把我坑惨了！

    一.前言 最近经常碰到开发误删除误更新数据,这不,他们又给我找了个麻烦,我们来看下整个过程,把我坑得够惨. 二.过程 由于开发需要在生产环节中修复数据,需要执行120条SQL语句,需要将数据进行更新, ...

  6. unity整理

    1. hashmap实现原理 Dictionary hashtable https://www.cnblogs.com/InCerry/p/10325290.html2. malloc与new3. 循 ...

  7. Git克隆项目到本地

    刚进公司实习,居然不知道Git怎么克隆项目到本地,组长丢给我一个TFS账号(Azure DevOps就是以前的TFS) 1.首先在本地选择一个文件目录,选择Git Bash Here 打开一个Git ...

  8. 【STM32】电能表抄表功能实现|自学笔记

    一.抄表的原理 抄表就是读电能表的测量参数,一般有电能,电压,电流,实时功率,功率因数等,用单板抄表其实就是读电能表种相应寄存器中的值.智能电表目前主流协议有DLT645国标各家通用,MODBUS各家 ...

  9. TS 之 reduce

    一.函数介绍 Array.reduce()方法是对数组进行遍历,返回一个计算后的值 使用方法: Array.reduce((acc, cur, idx, src) => { }, initial ...

  10. centos7 安装jupyter

    1.基本包安装 yum update -y yum install python-pip -y yum install bzip2 -y yum groupinstall "Developm ...