html:

  1. <div class="hh">
  2. </div>

css:

  1. .hh{
  2. width: 500px;
  3. height: 500px;
  4. background: #127feb;
  5. /* Old browsers */
  6. background: -moz-linear-gradient(-45deg, #66cdcc 0%, #66cdcc 100%);
  7. /* FF3.6+ */
  8. background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #66cdcc), color-stop(100%, #127feb));
  9. /* Chrome,Safari4+ */
  10. background: -webkit-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
  11. /* Chrome10+,Safari5.1+ */
  12. background: -o-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
  13. /* Opera 11.10+ */
  14. background: -ms-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
  15. /* IE10+ */
  16. background: linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
  17. /* W3C */
  18. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66cdcc, endColorstr=#127feb, GradientType=1);
  19. /* IE6-9 fallback on horizontal gradient */
  20. }

css对角渐变的更多相关文章

  1. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  2. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  3. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

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

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

  5. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  6. CSS背景色渐变

      试了下 渐变色  ,主要确定开始位置  结束位置,以及对应的color-stop;  以下是兼容不同浏览器的代码片段       代码:<style type="text/css& ...

  7. 深入理解CSS径向渐变radial-gradient

    × 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...

  8. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  9. 纯css径向渐变(CSS3--Gradient)

    渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gra ...

随机推荐

  1. HCNA Routing&Switching之GVRP

    前文我们了解了不同vlan间路由相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15110336.html,今天我们来聊一聊vlan动态注册相关话题: ...

  2. Java数组07——稀疏数组

    稀疏数组 总结: 记录有效的坐标: 记录原始做表的大小和有效值的个数 记录每一个有效值的坐标 ,变成一个新的数组 age:  package array; ​ public class ArrayDe ...

  3. linux50个常用命令

    1.存放用户账号的文件在哪里? /etc/passwd 2.如何删除一个非空的目录? rm -rf 目录名 3.查看当前的工作目录用什么命令? pwd 4.创建一个文件夹用什么命令? mkdir 5. ...

  4. Lateral Movement

    简介 这次去宁夏护网,发现我有的朋友连最基本的横向渗透有些都不晓得,他们问我 我也表达不清楚...,就想着写篇文章总结下吧 (慢慢更..) 可以发我邮箱讨论:muxue@protonmail.com ...

  5. Spring Cloud Alibaba - Spring Cloud Stream 整合 RocketMQ

    Spring Cloud Stream 简介 在微服务的开发过程中,可能会经常用到消息中间件,通过消息中间件在服务与服务之间传递消息,不管你使用的是哪款消息中间件,比如RabbitMQ.Kafka和R ...

  6. @Valid和@Validated 区别

    Spring Validation验证框架对参数的验证机制提供了@Validated(Spring's JSR-303规范,是标准JSR-303的一个变种),javax提供了@Valid(标准JSR- ...

  7. [源码解析] PyTorch 分布式(2) --- 数据加载之DataLoader

    [源码解析] PyTorch 分布式(2) --- 数据加载之DataLoader 目录 [源码解析] PyTorch 分布式(2) --- 数据加载之DataLoader 0x00 摘要 0x01 ...

  8. 菜鸟的springboot常用注解总结

    菜鸟的springboot常用注解总结 0.前言 可以毫不夸张地说,这篇文章介绍的 Spring/SpringBoot 常用注解基本已经涵盖你工作中遇到的大部分常用的场景.对于每一个注解我都说了具体用 ...

  9. 测试框架unit之assertion断言使用详解

    NUnit是.Net平台的测试框架,广泛用于.Net平台的单元测试和回归测试中,下面我们用示例详细学习一下他的使用方法 任何xUnit工具都使用断言进行条件的判断,NUnit自然也不例外,与其它的xU ...

  10. qt 中回调函数的实现

    在QT中回调函数主要可以实现多态性,通过回调函数可以动态处理一些操作.在多线程中,当同时需要处理多个事务的时候,显然你会去创建多个线程类然后实例化,这显然会增加开发工作,当我们在线程类中加入一个回调函 ...