样式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. [POJ2942]Knights of the Round Table(点双+二分图判定——染色法)

    建补图,是两个不仇恨的骑士连边,如果有环,则可以凑成一桌和谐的打麻将 不能直接缩点,因为直接缩点求的是连通分量,点双缩点只是把环缩起来 普通缩点                             ...

  2. Python入门基础(9)__面向对象编程_1

    定义一个只包含方法的类 class 类名: def 方法1(self,参数列表): pass def 方法2(self,参数列表): pass 当一个类定义之后,要使用这个类来创键对象.语法如下: 对 ...

  3. JavaScript知识点---->运算规则与运算（逻辑、位）

    *在js中不同类型之间的运算,所得到结果的类型也会有所变化: string + number = string string + boolean = string string + undefiend ...

  4. c语言进阶14-线性表之链表

    一.  线性表的链式存储结构 1.        顺序存储结构不足的解决办法 前面我们讲的线性表的顺序存储结构.它是有缺点的,最大的缺点就是插入和删除时需要移动大量元素,这显然就需要耗费时间.能不能想 ...

  5. 【Java中级】（五）异常处理

    1.什么是异常 异常定义:导致程序的正常流程被中断的事件,叫做异常. 2.异常处理 try catch finally throws package exception; import java.io ...

  6. Java emoji持久化mysql

    好久没有更新博客了,今天和大家分享一个关于emoji表情持久化问题,相信做web开发的都遇到过这样的问题,因为我们知道mysql的utf-8字符集保存不了保存不了表情字符,这是为什么呢?因为普通的字符 ...

  7. JS面向对象编程（一）：封装

    js是一门基于面向对象编程的语言.      如果我们要把(属性)和(方法)封装成一个对象,甚至要从原型对象生成一个实例,我们应该怎么做呢?  一.生成对象的原始模式            假定把猫看 ...

  8. js数组排序 多条件

    按照[次数]和[时间]排序,选择次数最多的排在前面,同样次数的情况下时间较新排在前面. 原始数据: var arr= [ {name:'qqq', num:2,time:'2015-06-08 13: ...

  9. 章节十五、5-记录日志---Log4j

    一.为什么要用Log4j记录日志? 日志记录对于任何应用程序都非常重要. 它可以帮助我们快速调试代码,通过收集代码执行的信息让代码容易维护. 二.Log4j 是什么? Apache为Java提供的日志 ...

  10. Docker Toolbox安装

    公司最近搭建docker环境,其中会遇到一些问题,在这里记录一下. 先来了解一下docker 一.基本概念 1.Docker中基本概念镜像(Image) 提到镜像,有对操作系统有一定认知的都知道,镜像 ...