<!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. Java连载85-集合的Contains和Remove方法

    一.包含与删除两种方法解析 1.boolean contains(Object o);判断集合中是否包含某个元素. package com.bjpowernode.java_learning; imp ...

  2. react-native简单使用

    基本组件的使用介绍 View: Text: TextInput: Image: Button: ActivityIndicator: ScrollView:这是一个列表滚动的组件 ListView:也 ...

  3. How to write a paper in a weekend - by Prof. Pete Carr

    Key points: don't procrastinate; review the notes and renew the literature search; determine who you ...

  4. matplotlib 的一些知识

    import matplotlib.pyplot as plt plt做图有两种方式,一种是面向对象编程方式的,一种是直接利用plt的结构化的快速绘图编程方式.所以命令不能用错地方. fig=plt. ...

  5. 【转载】JS导出CSV文件

    转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串 ...

  6. android TextView 支持长按自由复制

    因为EditText支持系统的长按自由复制,所以只需要把EditText通过配置达到TextView效果就行了 <EditText android:id="@+id/subject_i ...

  7. php 对接国外支付 ipay88支付

    ipay88支付 近期接了一个国外的项目,客户指定要这种支付,就搞搞呗,其实流程和思路都是差不多的,往下看 他的流程其实非常简单  下面的流程仔细看看,看懂了就会了 1 首先我们需要先获取下单所需要的 ...

  8. 【Unity|C#】基础篇(4)——函数参数类型（值参/ref/out/params）

    [学习资料] <C#图解教程>(第5章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu.c ...

  9. import 与 from...import

  10. AcWing 1017. 怪盗基德的滑翔翼

    #include<iostream> using namespace std ; ; int f[N],g[N]; int w[N]; int main() { int t; cin> ...