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. 从《彩色圆环》一题探讨一类环上dp的解法

    清橙A1202 bzoj2201 bsoj4074 试题来源 2010中国国家集训队命题答辩 问题描述 小A喜欢收集宝物.一天他得到了一个圆环,圆环上有N颗彩色宝石,闪闪发光.小A很爱惜这个圆环,天天 ...

  2. C# read file to bytes,File.ReadAllFiles,File.Open(),BinaryReader

    using System; using System.Text; using System.IO; namespace ConsoleApplication15 { class Program { s ...

  3. c++-友元函数和友元类

    友元函数 友元函数和友元类(破坏类的封装性) 面向对象编程思想 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include & ...

  4. Gradle Java 插件

    Java 插件是构建 JVM 项目的基础,它为项目增加了很多能力,例如编译,测试,打包,发布等等. 很多插件都是基于 Java 插件实现的,例如 Android 插件. 用法 使用 id 应用插件 p ...

  5. adb 获取平台号

    获取 Android 的 PLATFORM_VERSION :adb shell getprop ro.build.version.release获取 Android 的 APP_PACKAGE 和 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 3D变换2

    3  perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...

  7. 如何将本地的项目推送到github

    一.创建密钥 1.本地终端命令行生成密钥 访问密钥创建的帮助文档:https://help.github.com/en/github/authenticating-to-github/generati ...

  8. (八十)c#Winform自定义控件-分割线标签-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  9. 斐波那契数列(Java)

    一.什么是斐波那契数列 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为& ...

  10. java之数据结构

    数据结构有什么用? 现实世界的存储,我们使用的工具和建模.每种数据结构有自己的优点和缺点,想想如果Google的数据用的是数组的存储,我们还能方便地查询到所需要的数据吗?而算法,在这么多的数据中如何做 ...