很神奇的背景设置，

看代码，

<html>

	<title>css</title>

	<style>

		.content {

            background: linear-gradient(90deg,yellow,red);

            width: 100%;

            height: 100%;

		}

	</style>

	<body>

        <div class="content"></div>

	</body>

</html>

会产生这种效果的背景。

查看浏览器支持性，www.caniuse.com

可以看出很多浏览器都支持！

css揭秘之linear-gradient的更多相关文章

  1. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  2. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  3. css 揭秘-读书笔记

    css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...

  4. [css 揭秘]-css coding tips

    css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...

  5. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  6. 《css揭秘》

    <css揭秘> 第一章:引言 引言 案例们 第二章:背景与边框 背景和边框 半透明边框(rgba/hsla.background-clip) 多重边框(box-shadow) 灵活的背景定 ...

  7. [css 揭秘]：CSS揭秘 技巧（三）：背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  8. CSS揭秘 技巧（五）：条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  9. [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  10. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

随机推荐

  1. C#定义自定义类型转换

    类型转换不限于单一继承链中的类型(派生类转换为基类或者基类转换为派生类),完全不相关的类型之间也能进行转换.关键在于在两个类型之间提供转型操作符. 在下面这样的情况下应该定义显式转型操作符: 在转型有 ...

  2. JavaScript基础-面向对象编程<2>

    2.动态添加,修改和删除对象属性和方法 例如:用类Object()创建一个空对象user,然后修改其行为. (1) 添加属性 var user=new Object(); //创建一个没有属性和方法的 ...

  3. 04_SSM框架整合（Spring+SpringMVC+MyBatis）

    [SSM的系统架构] [整合概述] 第一步: MyBatis和Spring整合,通过Spring管理mapper接口. 使用mapper的扫描器自动扫描mapper接口在Spring中进行注册. 第二 ...

  4. C++ #pragma 预处理指令

    #pragma 预编译指令的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情况下,给出主机或操作系统专有的特征 ...

  5. Wooden Sticks

    Wooden Sticks Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total ...

  6. OpenJudge / Poj 1044 Date bugs C++

    链接地址: Poj:http://poj.org/problem?id=1044 OpenJudge:http://bailian.openjudge.cn/practice/1044/ 题目: 总时 ...

  7. QML定时器

    QML中的定时器能够周期性的触发一个事件,其使用非常简单.方便.这里给出一个示例: import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQu ...

  8. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  9. ECSHOP订单一键发货简化订单发货流程

    第一步: 在templates/order_info.htm文件找到: {if $operable_list.confirm}       <input name="confirm&q ...

  10. LINQ实战

    转载:http://www.cnblogs.com/yubinfeng/p/4567064.html    原作者:尼古拉斯~yu 文章部分内容在原文的基础上有删改. 我相信在net进阶的这个阶段,很 ...