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. QT使用mysql

    1.首先要下载qt create 官网链接:https://wiki.qt.io/Main 2.下载mysql驱动mysql-connector-c,注意是c或c++版本的驱动 官网下载地址:http ...

  2. vue中子组件直接修改父组件prop属性bug

    在有些时候,子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题. 比如,父组件传过来的一个对象 checkBoxObj: checkBoxObj:{ checked: false } ...

  3. MyBatis进阶讲解+ssm集成

    1.sql映射器Mapper MyBatis基于动态代理机制,让我们无需再编写Dao的实现. 传统Dao接口,现在名称统一以Mapper结尾,还有我们映射器配置文件要和映射器在同一个包. 1.1使用映 ...

  4. 网易极客战记官方攻略-地牢-Kithgard 图书管理员

    关卡连接: https://codecombat.163.com/play/level/kithgard-librarian 向友好的图书馆管理员求助! 简介 大多数关卡都有提示,在你卡关时挺有用. ...

  5. JS---案例:点击按钮设置div背景色渐变

    案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...

  6. 通知advice

    基于注解的Spring AOP开发,来自https://www.cnblogs.com/junzi2099/p/8274813.html 1.定义目标类接口和实现类 2.编写Spring AOP的as ...

  7. acwing 861. 二分图的最大匹配 模板

    地址  https://www.acwing.com/problem/content/description/863/ 给定一个二分图,其中左半部包含n1n1个点(编号1~n1n1),右半部包含n2n ...

  8. ASP.NET Core on K8S深入学习(11)K8S网络知多少

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.Kubernetes网络模型 我们都知道Kubernetes作为容器编排引 ...

  9. C++之结构体特点

    C++的结构体和C语言的结构体有什么不同 C++的结构体其实就是类的一种,只不过类成员默认访问权限是private,结构体默认访问权限是public. C语言的结构体是不能有函数的,而C++可以有. ...

  10. Hive数据类型和DDL操作

    hive命令 在Linux下的命令行中直接输入如下命令,可以查看帮助信息: # hive -help 常用的如-e.-f参数. 使用-e参数,可以直接在命令行传递SQL语句进行hive表数据的查询: ...