<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3渐变背景色</title>

</head>

<!--

背景颜色线性渐变【linear-gradient】

语法：

background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；

起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角

过渡色：可以插入多个，表示多种颜色的渐变

 -->

<style>

    .linear-gradient{

        width: 1000px;

        margin:0 auto;

        text-align: center

    }

    .linear-gradient p{

        width: 100px;

        height: 100px;

        float: left;

        border:1px #999 solid;

        line-height: 100px;

        margin-right: 100px;

        font-size:20px;

    }

    .linear-gradient p:first-child{

        background:-webkit-linear-gradient(top,#09f,#fff,#0c0);

    }

    .linear-gradient p:last-child{

        background:-webkit-linear-gradient(20deg,#09f,#fff,#0c0);

    }

</style>

<body>

    <div class="linear-gradient">

        <p>普通渐变</p>

        <p>角度渐变</p>

    </div>

</body>

</html>

css3之渐变背景色（linear-gradient）的更多相关文章

  1. CSS3－渐变背景色

    线性渐变背景色: <style> .linear { width:130px; height:130px; border:2px solid black; padding: 10px; b ...

  2. 实用的CSS3－渐变背景色

    线性渐变背景色:     第一个参数为渐变方式,后两个参数为起始点位置和终止点位置,后两个参数为起始颜色和终止颜色,后面那个参数为背景区域padding表示包含padding的区域,content表示 ...

  3. CSS3之渐变Gradient

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

  4. CSS3之线性渐变（linear gradients）

    线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...

  5. CSS3 线性渐变（linear-gradient） 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  6. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

  7. Android_1_渐变背景色

    首先创建一个渐变背景色文件drawable-mdpi/bg_color.xml <?xml version="1.0" encoding="utf-8"? ...

  8. CSS3背景渐变。。。

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  9. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

随机推荐

  1. source insight增加tab标签页的方法之sihook

    1.效果如下 2.方法见如下博客 http://www.cnblogs.com/Red_angelX/archive/2013/01/23/2873603.html

  2. 在Java后端如何添加拦截器

    在安全编码规范中,在Java后端controller层接口需要对调用者的身份进行确认,以防非法用户进行访问.若是在controller层的每个接口处都添加逻辑判断,那么代码重复度高,并且费力费时.此时 ...

  3. JavaScript 继承 -JavaScript高级程序设计

    oo(Object Oriented)面向对象 许多oo语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.函数没有签名,在ecmascript中无法实现接 ...

  4. F 采蘑菇的克拉莉丝

    这是一道树链剖分的题目: 很容易想到,我们在树剖后,对于操作1,直接单点修改: 对于答案查询,我们直接的时候,我们假设查询的点是3,那么我们在查询的时候可分为两部分: 第一部分:查找出除3这颗子树以外 ...

  5. Oracle库基本操作

    --oracle 获取表名称,字段 with vA as ( SELECT USER_TAB_COLS.TABLE_NAME as 表名,USER_TAB_COLS.COLUMN_NAME as 列名 ...

  6. C++-基类的析构函数为什么要加virtual虚析构函数（转）

    知识背景 要弄明白这个问题,首先要了解下C++中的动态绑定. 关于动态绑定的讲解,请参阅:  C++中的动态类型与动态绑定.虚函数.多态实现 正题 直接的讲,C++中基类采用virtual虚析构函数是 ...

  7. linux - mysql：安装mysql

    安装环境 系统是 centos6.5 1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6. ...

  8. 六、JVM之垃圾回收

    GC日志 -Xmx1024m -Xms1024m -XX:+PrintGCDetails Heap PSYoungGen total 305664K, used 26214K [0x00000000e ...

  9. AE 打开Shp文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. P1010 幂次方（分治）

    https://www.luogu.com.cn/problem/P1010 刚刚看到这个题时,有点懵,如果说这是个数学题 比如说7,应该先求出7 = 4 + 2 + 1; 即先分解出里面应该有最多的 ...