<!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 - CAS及CAS底层原理

    CAS是什么? CAS的全称为Compare-And-Swap它是一条CPU并发原语,也就是在CPU硬件层面上来说比较并且判断是否设置新值这段操作是原子性的,不会被其他线程所打断.在JAVA并发包ja ...

  2. Qt Installer Framework翻译(7-7)

    脚本API 下表总结了可以在控制器和组件脚本中使用的全局JavaScript对象. QMessageBox 提供一个模式对话框,通知用户或询问用户问题并接收答案 buttons 提供可在安装程序页面上 ...

  3. markdwon编辑公式入门

    上标与下标   上标和下标分别使用^ 与_ ,例如\(x_i^2\)表示的是:.   默认情况下,上.下标符号仅仅对下一个组起作用.一个组即单个字符或者使用{..} 包裹起来的内容.如果使用\(10^ ...

  4. Vuejs+elementUI项目，在进行打包时，要注意的问题

    注意:打包之前,需要注意修改一些地方 (1)若是前后端分离开发的,前端开发过程中可能会在api.js中设置访问路径为服务器所在电脑的ip:端口,打包前,最好将它改回localhost:8080 (2) ...

  5. Zabbix使用手册

    https://blog.csdn.net/qq_40025218/article/details/81778754

  6. 菜鸟教程 Missing parentheses in call to 'print'

    个人博客 地址:http://www.wenhaofan.com/article/20180618180327 >>> print "hello" SyntaxE ...

  7. 154.Ajax处理csrf防御

    在普通的form表单中采用post请求提交数据,可以在form表单的method=post的form标签下面,添加一个csrf_token标签{% csrf_token %},或者是直接手动的添加一个 ...

  8. JDBC获取超出最大连接的连接池对象

  9. 【网站】网站不能在QQ，微信中访问，申诉办法

    使用这个网站申诉即可 https://appeal.anquan.org/

  10. [Codechef CHSTR] Chef and String - 后缀数组

    [Codechef CHSTR] Chef and String Description 每次询问 \(S\) 的子串中,选出 \(k\) 个相同子串的方案有多少种. Solution 本题要求不是很 ...