linear-gradient

  1. linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果。MDN地址
  2. linear-gradient在不同内核下使用方式不同,详细内容可参考w3cplus

实用栗子(在Chrome下)

  1. 缺角效果

    先看效果图

    <div class="div1">
    这是内容
    </div>
    .div1 {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background:linear-gradient(-135deg, transparent 15px, #162e48 0);
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    margin-bottom: 30px;
    }
  2. 补角效果

    先看效果图

    <div class="div2">
    这是内容
    </div>
    .div2 {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background:linear-gradient(-135deg, #f00 15px, #162e48 0);
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    margin-bottom: 30px;
    }

    只是在栗子1的基础上修改了linear-gradient,将transparent修改为#f00

  3. 带边框的效果

    先看效果图

    <div class="div3">
    这是内容
    </div>
    .div3 {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background:linear-gradient(-135deg, #f00 15px, #162e48 0);
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 0 1px 1px #fff inset;
    }

    在栗子2的基础上增加了box-shadow,当然加边框可以有多种方式,可自行选择。

  4. 开关效果

    效果图

    <div class="div4">
    <div class="div4-1">OFF</div>
    <div class="div4-2 active">ON</div>
    </div>
    .div4 {
    width: 144px;
    height: 30px;
    line-height: 30px;
    background: #162e48;
    color: #FFF;
    text-align: center;
    margin-bottom: 30px;
    }
    .div4-1, .div4-2 {
    width: 86px;
    float: left;
    }
    .div4-1.active {
    margin-right: -28px;
    background:linear-gradient(-135deg, transparent 20px, #f00 0);
    }
    .div4-2.active {
    margin-left: -28px;
    background:linear-gradient(45deg, transparent 20px, #f00 0);
    }

    最终效果可根据需要自行调整

  5. 在栗子3的基础上做到以下效果,单纯使用linear-gradient没有找到解决方法,如有方案,请在评论下给出方案。以下是其中一种解决方式

    效果图

    .div5 {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background:linear-gradient(-135deg, #fff 15px, #162e48 0);
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    box-shadow: 0 0 1px 1px #fff;
    margin-bottom: 30px;
    position: relative;
    }
    .div5:after {
    content: ' ';
    border: solid transparent;
    position: absolute;
    border-width: 12px;
    border-top-color: #000;
    border-right-color: #000;
    top: -2px;
    right: -2px;
    }
  6. 考虑到兼容性问题,可以通过:before:after实现同样的效果,给出一个栗子

    .div6 {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background:#162e48;
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    position: relative;
    border: 1px solid #fff;
    margin-bottom: 30px;
    }
    .div6:before {
    content: ' ';
    border: solid transparent;
    position: absolute;
    border-width: 15px;
    border-top-color: #fff;
    border-right-color: #fff;
    right: 0px;
    top: 0px;
    }
    .div6:after {
    content: ' ';
    border: solid transparent;
    position: absolute;
    border-width: 15px;
    border-top-color: #000;
    border-right-color: #000;
    top: -1px;
    right: -1px;
    }

CSS3样式linear-gradient的使用的更多相关文章

  1. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  2. CSS3样式运用,悬浮立体方块

    前言 作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用. 我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了.现在流行扁平化设计,没有了阴影,没有了立体! ...

  3. 两款CSS3样式可视化在线生成工具

    CSS3随着浏览器的升级已经被越来越广泛的运用,合理的运用CSS3可以使你的网站更加美观,并且之前只能用js才能实现的效果也已经可以直接用 CSS3来实现.但是虽然如此,很多浏览器对CSS3的支持还都 ...

  4. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  7. 几个常用的CSS3样式代码以及不兼容的解决办法

    原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...

  8. 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  9. 几种常用CSS3样式

    在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...

  10. css3-1 css3游戏介绍、css3样式和优先级

    css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...

随机推荐

  1. java 转成字符串 json 数组和迭代

    当你需要转成一串一串的json 排列 .当内容和遍历它们. 首页进口 net.sf.json.JSONArray和net.sf.json.JSONObject 两个jar 包 String str = ...

  2. request.getparameter和 request.getattribute的差别

    request.getAttribute():是request时设置的变量的值,用request.setAttribute("name","您自己的值");来设 ...

  3. SD卡FAT32获得高速的文件格式(图文介绍)

    说明: MBR :Master Boot Record ( 主引导记录) DBR :DOS Boot Record ( 引导扇区) FAT :File Allocation Table ( 文件分配表 ...

  4. Mysql高级之游标

    原文:Mysql高级之游标 什么是游标?select 语句也许一次性会取出来n条语句,那么游标便可以一次取出来select中的一条记录.每取出来一条,便向下移动一次!可以实现很复杂逻辑! 上面还有有一 ...

  5. Javascript多线程引擎(九)

    Javascript多线程引擎(九)--垃圾回收 垃圾回收这个话题对Programer来说是非常老旧的话题, 从手动的malloc/free 到半自动的 引用计数 再到全自动的 mark-sweep ...

  6. 关于覆盖Object中的hashCode, equals和toString

    最近在看<Effective Java>,里面看到了关于重载hashCode.equals和toString方法的篇章,顿时觉得视野开拓了不少,而且正结合自己工作.项目中的实例,觉得有必要 ...

  7. Net 4.0 之 Dynamic 动态类型

    Net 4.0 之 Dynamic 动态类型 本文主要旨在与网友分享.Net4.0的Dynamic 对Duck Type 的支持.     一..net4.0主要新特性 .Net4.0在.Net3.5 ...

  8. C#自定义配置文件节点

    老实说,在以前没写个自定义配置节点之前,我都是写到一个很常用的节点里面,就是appSettings里add,然后再对各个节点的value值进行字符串分割操作,根据各种分割字符嵌套循环处理,后来看到一些 ...

  9. linux网卡驱动安装及锐捷使用

    原创博文,转载请注明出处 先吐槽一下,以前装了个Centos win7双系统, 然后手贱一不小心把启动文件给删了,接下来就用grub恢复启动文件,整了一天也没搞出来还把win7的Boot Manage ...

  10. .NET面向对象特性之“继承”

    整体简介 1.理解继承——继承关系图 2.实现继承与接口多继承 3.new. virtual.override方法 4.抽象方法和抽象类的继承 5.继承的本质 6.继承的复用性.扩展性和安全性 7.多 ...