Applied Visual Design: Create a Gradual CSS Linear Gradient

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...)
 
The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash.
The following arguments specify the order of colors used in the gradient.
 
Example:
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

练习代码如下:

<style>
div {
border-radius: 20px;
width: %;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #ccffff, #ffcccc);
}
</style>
<div></div>
效果如下:
 
 

FCC---Create a Gradual CSS Linear Gradient的更多相关文章

  1. css text gradient color, css fonts gradient color

    css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...

  2. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  3. 【css】gradient匹配ps渐变叠加效果

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 一.linear-gradient(线性渐变) eg:background: l ...

  4. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  5. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  6. 通过CSS实现的html背景色渐变

    实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  8. CSS颜色渐变

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  9. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

随机推荐

  1. 13-Node.js学习笔记-MongoDB

    数据库相关概念 在一个数据库软件最终可以包含多个数据仓库,在每个数据仓库中可以包含多个数据集合,每个数据集合中可以包含多条文档(具体的数据) database: 数据库,mongoDB数据库软件中可以 ...

  2. ASP.NET Aries 高级开发教程:表单检测字段是否已存(番外篇)

    前言: 昨天刚好有人问了这个问题,因此就针对这个问题,补上一篇吧. 正文: 如图:在用户编辑列表中,用户名是会自动检测是否已存在的. 具体对应的Html内容如下: <label><e ...

  3. SpringCloud微服务的Eureka

    一.什么是微服务架构 架构设计概念,各服务间隔离(分布式也是隔离),自治(分布式依赖整体组合)其它特性(单一职责,边界,异步通信,独立部署)是分布式概念的跟严格执行SOA到微服务架构的演进过程 作用: ...

  4. Mysql性能优化之参数配置(转)

    前言: Mysql作为数据库中广泛应用的开源产品,需要面对不同的生产压力,而有些性能问题通过配置优化就可以得到解决,优化可以分为几个方向:1.优化参数配置.2.优化数据库索引.3.优化数据库结构,如分 ...

  5. Context知识详解

    Context知识详解 建议配合context知识架构图食用. 一.什么是Context 贴一个官方解释: Interface to global information about an appli ...

  6. Retrofit-草稿

    1.GSONFormat 2.动态代理 https://www.cnblogs.com/maohuidong/p/7992894.html  retrofit的核心就是动态代理

  7. MySql 更新死锁问题 Deadlock found when trying to get lock; try restarting transaction

    文章导航-readme MySql 更新死锁问题 Deadlock found when trying to get lock; try restarting transaction 1.场景 //t ...

  8. 解决方案:从网站下载Excel,我的Office 2016,打开excel文件,显示空白

    今天在写Excel导出案例demo的时候发现,Excel下载后打开空白,要打开了看到空白后再点击一次打开后才可以显示,效果就如下图所示: 那么我就不能一次打开吗?我找了半天最终在这个博客找到了答案:h ...

  9. Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构

    Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...

  10. 中国古风唯美水墨工作计划汇报PPT模板推荐

    模版来源:http://ppt.dede58.com/