样式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. web应用分页

    1. 场景描述 目前大部分的应用程序中都会用到分页功能,以便减少前端浏览器及后台服务器的压力,以及其他方面的考虑. (1)分页从概念上可分为逻辑分页和物理分页,逻辑分页主要是通过应用程序(前端或者后端 ...

  2. 剑指offer第二版-4.二维数组中的查找

    面试题4:二维数组中的查找 题目要求: 一个二维数组中,每一行从左到右递增,每一列从上到下递增.输入一个整数,判断数组中是否含有该整数 /** * @since 2019年2月13日 下午5:08:5 ...

  3. ~~Python解释器安装教程及环境变量配置~~

    进击のpython Python解释器安装教程以及环境变量配置 对于一个程序员来说,能够自己配置python解释器是最基础的技能 那么问题来了,现在市面上有两种Python版本 Python 2.x ...

  4. ROS中URDF的学习以及与Xacro的比较

    1.urdf与Xacro简单比较 "URDF" 是最初也是比较简单的机器人描述文件,它的结构简单明了,容易理解.但是这也导致当机器人模型变得复杂时,urdf的结构描述就变得冗长,无 ...

  5. WinForm控件之【CheckBox】

    基本介绍 复选框顾名思义常用作选择用途,常见的便是多选项的使用: 常设置属性.事件 Checked:指示组件是否处于选中状态,true为选中处于勾选状态,false为未选中空白显示: Enabled: ...

  6. [记录]优化Linux 的内核参数来提高服务器并发处理能力

    优化Linux 的内核参数来提高服务器并发处理能力PS:在服务器硬件资源额定有限的情况下,最大的压榨服务器的性能,提高服务器的并发处理能力,是很多运维技术人员思考的问题.要提高Linux 系统下的负载 ...

  7. [小米OJ] 4. 最长连续数列

    思路: 时间限制为O(n),即不能使用先排序后寻找的方法. 这里利用哈希表查询插入复杂度都为O(1)的特性来解,利用一个哈希表来保存每一个数字以及其所在数列的长度. 遍历每一个数字n:查询表中是否存在 ...

  8. C#编程之接口

    1.定义 接口是把公共方法和属性组合起来,以封装特定功能的一个集合.(一旦定义了接口,就可以在类中实现它.这样类就可以支持接口所指定的所有属性和成员) 注意1:接口不能单独存在.不能像实例化一个类那样 ...

  9. 0 MapReduce实现Reduce Side Join操作

    一.准备两张表以及对应的数据 (1)m_ys_lab_jointest_a(以下简称表A) 建表语句: create table if not exists m_ys_lab_jointest_a ( ...

  10. Java 内存模型详解

    概述 Java的内存模型(Java Memory Model )简称JMM.首先应该明白,Java内存模型是一个规范,主要规定了以下两点: 规定了一个线程如何以及何时可以看到其他线程修改过后的共享变量 ...