很神奇的背景设置,

看代码,

<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. Python(Django) 连接MySQL(Mac环境)

    看django的文档,详细的一塌糊涂,这对文档来时倒是好事,可是数据库连接你别一带而过啊.感觉什么都想说又啥都没说明白,最有用的一句就是推荐mysqlclient.展开一个Django项目首先就是成功 ...

  2. jQuery 源码分析6: jQuery 基本静态方法(二)

    jQuery.extend({ // 遍历obj的所有值 // args 这参数只能内部调用的会用到 // 注意到,如果回调函数调用失败会直接跳出并中止遍历 // 当有args数组时,使用apply调 ...

  3. 准备Activiti的开发环境

    1.创建项目

  4. GNU iconv

    GNU iconv 一.关键函数 1.iconv_open() iconv_open(DestinationCharsets, SourceCharSets) 2.iconv() [XSI] [Opt ...

  5. Windows下Wamp装不上Memcache扩展

    windows下wamp装不上memcache扩展2015.03.20 No Comments 1,243 views用的是WAMP集成包,PHP版本5.5.12http://windows.php. ...

  6. ehcache集群的配置

    一:配置环境 本文是在测试demo的基础上写的,服务器包括申请的两台服务器和本机,共三台服务器.demo的目标是实现三台服务器之间共享cache. 申请的两台服务器地址分别是172.19.100.15 ...

  7. vs快捷键及常用设置(vs2012版)

    vs快捷键: 1.ctrl+f F是Find的简写,意为查找.在vs工具中按此快捷键,可以查看相关的关键词.比如查找哪些页面引用了某个类等.再配合查找范围(整个解决方案.当前项目.当前文档等),可以快 ...

  8. POJ1384完全背包问题

    题目大意:给你一个储蓄罐空的,和满的重量,然后给出各种硬币的价值和对应的重量,要你估计出储蓄罐里面硬币价值和最小为多少,注意要保证重量和恰好为给出满的重量解题思路:完全背包问题,只是求最小值,注意初始 ...

  9. uCGUI窗口重绘代码分析

    一.概述 µC/GUI的窗口重绘是学习者理解窗口工作原理和应用窗口操作的重点.µC/GUI的窗口重绘引入了回调机制,回调机制可以实现图形系统调用用户的代码,由于图形系统使用了剪切算法,使得屏幕重绘的效 ...

  10. <四> SQL存储过程

    存储过程的定义: create procedure procedurename @param1 nvarchar(30) as select * from tablename where name = ...