很神奇的背景设置，

看代码，

<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. Intellij IDEA配置优化--转载

    1. 在线激活 安装IntelliJ IDEA 2016.1.2版本后,在联网状态下激活.Help --> Register,选择lisence server,粘贴地址http://www.it ...

  2. cics下任务的停止

    cicsterm CEMT I TA TAB==找到要停止的进程 在进程后加入 f或者p 或者fp =========================== 或者找到进程ID号 用命令:kill -9 ...

  3. Java大数操作类

    Java的大数操作分为BigInteger和BigDecimal,但这两给类是分开使用的,有时候在编程的时候显得略微繁琐,现在编写了一个将二者合二为一的大数操作类. 大数操作类代码如下: packag ...

  4. 程序员面试题精选100题(16)－O(logn)求Fibonacci数列[算法]

    作者:何海涛 出处:http://zhedahht.blog.163.com/ 题目:定义Fibonacci数列如下: /  0                      n=0 f(n)=      ...

  5. PHP - 5.4 Array dereferencing 数组值

    在5.4之前我们直接获取数组的值得方法如下 <?php $str = 'a;b;c;d'; list($value) = explode(';',$str); echo $value; 结果为: ...

  6. 解决rtl8723be无线网卡驱动频繁断网问题

    买了新本子,用的是rtl8723be无线网卡,连WIFI时总是断网.Windows下好解决,Ubuntu下可就麻烦了,又是升级内核又是编译驱动的,折腾了一天,终于找到了解决办法: # echo &qu ...

  7. Linux C 程序 基础语法(1)

    1.Linux 下第一支C程序,控制台打印一句话. vi first.c //linux新建文件 #include<stdio.h> int main() { printf("w ...

  8. 我对TCP CDG拥塞控制算法的改进和优化

    其实这不是我的优化,我是借用了BBR之力.         借了什么力呢?这是我一再强调的,BBR最大的共享不是为Linux贡献了一个TCP拥塞控制算法(它同时在也BSD上被实现...),而是它重构了 ...

  9. php 魔术方法__get()和__set()理解

    __get()方法,官方手册上是这样解释的 : ' 当调用(自己加的:或设置|赋值)当前环境下未定义或不可见的类属性或方法时,重载方法会被调用.本节后面将使用"不可访问属性(inaccess ...

  10. Dede 列表页 缩略图 有显示无则不显示

    [field:array runphp='yes']@me = (strpos(@me['litpic'],'defaultpic') ? "" : "<div c ...