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. 6、UnityConfig实现AOP

    需求:我们需要给已经开发好的服务如这里的UserService,添加额外的执行逻辑,但是又不想破坏原有的服务,如:我们需要给UserService添加监控逻辑,监控的目的是看UserService服务 ...

  2. 一起学Vue之样式绑定

    在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...

  3. impala-shell导出数据存在中文异常问题

    由于查询在impala-shell 中没有问题,在导出数据的时候才有问题,这是impala-shell的客户端是由python编写的,而Python无法自动将unicode对象写入没有设置默认编码的输 ...

  4. HTTP认知(请求与响应)

    web的工作是:浏览器发送请求报文 + 服务端返回响应报文 通俗的说一下web工作的一个流程: 浏览器向服务端发送HTTP请求报文:这条请求报文组成由请求行.请求头.请求体三大部分组成: 1.请求行 ...

  5. centos和rhel中软件包管理常用命令

    软件包管理的常用命令  rpm软件包的管理  查询类: rpm  -q 软件包的查询: rpm  -q  软件包的名字   //你的记住软件包完整名字 模糊查询:rpm  -qa  |  grep   ...

  6. [Codeforces 1244C] The Football Season

    思维加枚举 题意 :足球赛,赢平所得到的分数分别为w和d,w>d,分别求赢平输的场数,输出一组即可,即x+y+z=n 且 xw+yd=p的一组解. 可以扩展公约数做,但由于注意到d和w<1 ...

  7. Vue 04

    目录 创建Vue项目 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 项目生命周期 添加组件-路由映射关系 文件式组件结构 配置全局css样式 子组件的 ...

  8. Idea中Maven的安装

    Maven 软件的下载 为了使用Maven 管理工具,我们首先要到官网去下载它的安装软件.通过百度搜索“Maven“, 点击Download 链接,就可以直接进入到Maven 软件的下载页面: 目前最 ...

  9. SpringBoot系列——Jackson序列化

    前言 Spring Boot提供了与三个JSON映射库的集成: Gson Jackson JSON-B Jackson是首选的默认库. 官网介绍: https://docs.spring.io/spr ...

  10. arcgis api for javascript 学习(一) 调用在线发布的动态地图

    1.图中显示为arcgis软件中显示的地图文件 2.调用动态地图主要的是知道动态地图的URL地址 3.通过IDE(webstorm)调用动态地图,如图 4.话不多说,直接上代码 <!DOCTYP ...