样式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. springboot项目快速搭建

    1. 问题描述 springboot的面世,成为Java开发者的一大福音,大大提升了开发的效率,其实springboot只是在maven的基础上,对已有的maven gav进行了封装而已,今天用最简单 ...

  2. HTML&CSS构建和设计网站

    1.a链接:两个特性,href.target,href里添加mailto:邮箱可以直接链接到其它人的邮箱,添加#id,可以把窗口位置直接定位到该id的元素位置, target:_black可以在新的窗 ...

  3. Python选修第00次作业：缘分

    先说一说我与Python的缘分吧.初识Python,是在高三上学期.从那位同学那里经过时,看到了他桌子上的一本书——<和小卡特一起学Python>,封面就很吸引人,便买来一本,累了不想做题 ...

  4. CentOS 7搭建vsftp(虚拟用户方式登录)

    说明: vsftpd的版本:vsftpd-3.0.2-22.el7.x86_64 ftp 根目录 : /data/ftp ftp 配置文件目录:/etc/vsftpd ftp 虚拟用户权限配置文件目录 ...

  5. java开发---关于ORA00604和ORA12705

    MyEclipse和oracle连接中出现的一个问题: 在使用工具连接orcale数据库时报了这两个异常  ORA-00604和ORA12705 ; 查找问题原因: 大概猜测是与字符集有关系 , 确认 ...

  6. MYSQL数据库约束类型

    07.14自我总结 MYSQL数据库约束类型 一.主键约束(primary key) 主键约束要求主键列的数据唯一,并且不能为空.主键分为两种类型:单字段主键和多字段联合主键. 1.单字段主键 写法 ...

  7. 《VR入门系列教程》之21---使用Unity开发GearVR应用

    使用Unity开发GearVR应用     上一章我们介绍了如何运用Unity3D开发Oculus Rift应用,当然,这个便宜且强大的游戏引擎也可以用于GearVR的应用开发,这时我们需要用到Ocu ...

  8. spring-boot-plus后台快速开发脚手架之代码生成器使用

    Generator 代码生成 _ _ _ _ (_) | | | | | | ___ _ __ _ __ _ _ __ __ _ ______| |__ ___ ___ | |_ ______ _ _ ...

  9. android 界面提示框架WisdomProgressHUD，为金典而生

    一:简述 今天给android开发者们,推荐一个金典的界面提示框架WisdomProgressHUD,使用简洁方便. WisdomProgressHUD 是一个半透明的 HUD 指示器. Wisdom ...

  10. 前后端分离 之vue-cli 搭建项目mac 系统讲解

    前端项目搭建必备技术 webpack nodejs 搭建 vue-cli 的安装 以上技术自行了解安装 一:创建前端项目 采用vue-cli 脚手架 1:终端执行如下命令 vue init webpa ...