样式1

background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

样式2

background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);

样式3

background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);

样式4

background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);

样式5

background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);

样式6

background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

6个美观的纯CSS渐变背景代码分享(亲测有效)的更多相关文章

  1. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  2. css渐变/背景

    1.线性渐变(gradient变化) linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果. 上图是从黄色渐变到绿色 background:linear-gradient( to ...

  3. 44.纯 CSS 创作背景色块变换的按钮特效

    原文地址:https://segmentfault.com/a/1190000015192218 感想: 伪元素作为背景变化. HTML code: <nav> <ul> &l ...

  4. 模仿某旅行网站 纯css实现背景放大效果

    基本功能是鼠标移动到图片上,对应宽度变宽.其中布局和基本样式直接copy官网,功能部分是自己瞎鼓捣实现的. 直接上代码: HTML部分 <div class="fold_wrap&qu ...

  5. 如何用纯 CSS 创作背景色块变换的按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XYKdwg 可交互视频教 ...

  6. css 渐变背景

    background: linear-gradient(left,#fa7f6d, #fc5e7f); left: 从左边开始

  7. 纯CSS绘制mac代码

    1.效果图 2.代码 <!doctype html> <html lang="en"> <head> <meta charset=&quo ...

  8. IE兼容问题，各类css hack代码（亲测有效）

    现在大部分企业对浏览器兼容要求是IE7+或者IE8+,要求IE6的很少,此处一并写出. IE6: _margin-top: 20px; IE6+IE7: *margin-top: 20px; +mar ...

  9. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

随机推荐

  1. spark 源码分析之十四 -- broadcast 是如何实现的？

    本篇文章主要剖析broadcast 的实现机制. BroadcastManager初始化 BroadcastManager初始化方法源码如下: TorrentBroadcastFactory的继承关系 ...

  2. 一个简单的EJB例子

    转载自 http://blog.sina.com.cn/s/blog_678530f60100hvwy.html 声明:这个Converter的例子应该是J2EE 1.4 Tutorial上面的.不过 ...

  3. 【题解】生日蛋糕-C++

    Description 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体.设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, ...

  4. form 利用BeginCollectionItem提交集合List<T>数据 以及提交的集合中含有集合的数据类型 如List<List<T>> 数据的解决方案

    例子: public class IssArgs { public List<IssTabArgs> Tabs { get; set; } } public class IssTabArg ...

  5. mysql -h139.129.205.80 -p test_db_dzpk < db.dump

    mysqldump -h139.129.205.80 -uroot -p db_a > db_dzpk.dump mysql -h139.129.205.80 -p test_db< db ...

  6. CAxWindow

    AtlAxWinInit(); CAxWindow m_wndFlashPlayer; CComPtr<IShockwaveFlash> m_FlashPtr; CComPtr<IU ...

  7. NOIp2018 TG day1 T2暨洛谷P5020 货币系统：题解

    题目链接:https://www.luogu.org/problemnew/show/P5020 这道题感觉比较水啊,身为普及组蒟蒻都不费力的做出来了,而且数据范围应该还能大一些,n起码几万几十万都不 ...

  8. Baozi Leetcode solution 1036: Escape a Large Maze

    Problem Statement In a 1 million by 1 million grid, the coordinates of each grid square are (x, y) w ...

  9. win10 安装mysql（图文详情）避免卡在最后一步

    win10 安装mysql 本人安装mysql一般都是在镜像文件夹中下载(http://mirrors.sohu.com/),最近系统重做了之后安装mysql5.5.msi,可以安装成功.但是在最后的 ...

  10. idea导入ssm javaweb maven项目

    本文笔者辛苦整理, 除了为方便大家贴的maven安装配置和方便的现有项目, 如转载请注明: https://www.cnblogs.com/m-yb/p/11229320.html idea导入ssm ...