html:

<div class="hh">
</div>

css:

            .hh{
width: 500px;
height: 500px;
background: #127feb;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #66cdcc 0%, #66cdcc 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #66cdcc), color-stop(100%, #127feb));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
/* IE10+ */
background: linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66cdcc, endColorstr=#127feb, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}

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. 并发编程——Java线程的6种状态及切换

    前言 本次主要分享一下Java线程的六种状态及其转换. 如果对于线程的创建方式不太了解,推荐观看并发编程--认识java里的线程 线程的状态及其转换 操作系统线程的五种状态 新建(NEW) 就绪(RU ...

  2. SQL 练习21

    查询每门课程被选修的学生数 SELECT cid,COUNT(cid) 选修人数 from sc GROUP BY cid

  3. noip34

    因为改不动T3而来水博客的屑 昨晚没睡好,大致看了一遍题面后,选择了死亡231,然后就死的很惨. T1 一开始大致看题面的时候,就略了一眼,加上没读全题,啥思路也没有,最后四十分钟滚回来看了看,发现就 ...

  4. NOIP 模拟 7 考试总结

    T1 超级大水题,用 \(kmp\) 和 \(hash\) 均能过,但都忘了,结果只打了个暴力.难受.板子题,题解就不放了 Code #include<bits/stdc++.h> #de ...

  5. "排序二叉树"之探幽

    /*怎么理解排序二叉树呢?在二叉树的基本定义上增加两个基本条件: (1)所有左子树的节点数值都小于此节点的数值: (2)所有右节点的数值都大于此节点的数值. */ 1 /*************** ...

  6. Ajax 与 Struts 1

    Xml配置 <action path="/product/product/validateCurrencyDecimalSupport" type="com.neu ...

  7. mzy git学习,git协同开发忽略文档配置以及一些杂点(九)

    回忆一个电脑多账户问题 之前也说了,如果使用ssh登陆的话,一个电脑就只能登陆一个账号了,不像通过凭据可以切换(但是其实也可以每次去生成新的公钥和私钥,只要你不嫌麻烦) 再次补充: ssh-keyge ...

  8. 微信小程序学习笔记四 页面的生命周期

    1. 生命周期 1.1 对应阶段说明 onLOad(Object query) 1.1 页面加载时触发, 一个页面只会调用一次, 可以在 onLoad的参数中获取打开当前页面路径中的参数 1.2 参数 ...

  9. 工作效率:通过pycharm的模板代码减少重复工作

    摘要 在常见的业务开发场景下,经常要开发大量重复的代码,这里代码耗时但又必要,就像我们写分析报告一样,每次都要为固定的格式耗费精力.我们可以更加日常开发经验总结出一些常用的模板代码来帮助我们实现一秒五 ...

  10. OVN架构

    原文地址 OVN架构 1.简介 OVN,即Open Virtual Network,是一个支持虚拟网络抽象的系统. OVN补充了OVS的现有功能,增加了对虚拟网络抽象的原生(native)支持,比如虚 ...