样式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. RDBMS与数据库之间的关系

    什么是数据库? 数据库就是用来存放数据的仓库,它是一种特殊的文件. 什么是关系型数据库? 关系型数据库就是指建立在关系模型基础上的数据库,通常由多张表组成,这些表之间存在一定的关系. 什么是RDBMS ...

  2. watch 和 computed

    <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essent ...

  3. 2019.6.21 NOIP2018提高组模拟题（二）

    1.咒语 (curse.pas/c/cpp) [题目描述] 亮亮梦到自己来到了魔法城堡,但一扇巨大的石门阻拦了他通向城堡内的路.正当他沮丧之际,突然发现门上有一处机关,机关上有一张很长的纸条.亮亮拿起 ...

  4. 从壹开始[ 做贡献 ]之三 || 北京.Net俱乐部活动——DNT精英论坛开幕

    缘起 哈喽大家好!好久不见,可能有一部分小伙伴发现我好久没有写文章了,是不是懒惰了,并没有,这两周也是正式开始了<NetCore系列教程的视频录制>,不过还不多,预计会是每周一个视频,基本 ...

  5. EnjoyingSoft之Mule ESB开发教程第二篇：Mule ESB基本概念

    目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application ...

  6. vue+element项目中使用el-dialog弹出Tree控件报错问题

    1. 按正常的点击按钮,显示dialog弹出的Tree控件,然后把该条数据下的已经选中的checkbox , 用setCheckedNodes或者setCheckedKeys方法选择上 , 报下面这个 ...

  7. 【CYH-02】NOIp考砸后虐题赛:坐标：题解

    代码: 这道题也并不难,用排序+简单动规即可.因为@Kevin_Wa 大佬放的是c++,所以我来一发Pascal. var min,max,i,a1,b1,c1,d1,n:longint; a,b,c ...

  8. 五分钟部署一套完整的Zabbix

    Zabbix-安装与使用 安装NTP yum install -y ntp 配置ntp.conf cd /etc/ vim ntp.conf # 打开之后讲一下内容添加 server cn.ntp.o ...

  9. C#3.0新增功能06 对象和集合初始值设定项

    连载目录    [已更新最新开发文章,点击查看详细] 使用 C# 可以在单条语句中实例化对象或集合并执行成员分配. 对象初始值设定项 使用对象初始值设定项,你可以在创建对象时向对象的任何可访问字段或属 ...

  10. [leetcode] 111.Mininum Depth of Binary Tree (Easy)

    原题 寻找二叉树最短深度 这里用了dfs,beat 100%,4ms class Solution { public: int minDepth(TreeNode *root, int minNum ...