<!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. HTTP 协议的 8 种请求类型介绍

    HTTP 协议的 8 种请求类型介绍 HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所 ...

  2. 【Unity|C#】基础篇(19)——集合库（Collections）

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

  3. Mybatis核心知识点

    一.初识Mybatis框架 mybatis是一个持久层的框架,是apache下的顶级项目. mybatis托管到goolecode下,再后来托管到github下(https://github.com/ ...

  4. 巴塞尔问题(Basel problem)的多种解法

    巴塞尔问题(Basel problem)的多种解法——怎么计算\frac{1}{1^2}+\frac{1}{2^2}+\frac{1}{3^2}+\cdots112+122+132+⋯ ? (PS:本 ...

  5. Alice and Hairdresser

    Alice's hair is growing by leaps and bounds. Maybe the cause of it is the excess of vitamins, or may ...

  6. C语言 goto

    C语言 goto 功能:无条件跳转.不推荐使用 案例 #include <stdio.h> int main() { // 函数跳转.循环跳转 // 创建标志位开始 // 无条件跳转到En ...

  7. Apache服务：使用 Apache 服务部署静态网站

    1.安装Apache服务 第一步:安装Apache服务程序   yum install httpd 具体流程参考https://www.cnblogs.com/python-wen/p/1016845 ...

  8. [CQOI2007] 余数求和 - 整除分块

    \(\sum_{i=1}^n\;k\;mod\;i\) Solution \(\sum_{i=1}^n\;k\;mod\;i\\=\sum_{i=1}^n(k-i\lfloor{\frac{k}{i} ...

  9. centos6.8安装教程

    特别详细的一个安装教程以及镜像下载等,用虚拟机不会安装或者安装失败的可以参考一下. https://blog.csdn.net/wu_zeqin/article/details/79833046

  10. [P4549] 【模板】裴蜀定理 - GCD

    __gcd真好用 #include <bits/stdc++.h> using namespace std; int main() { int n,x,a=0; cin>>n; ...