CSS---颜色过渡渐变

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{margin:0px; padding:0px;}

.box{margin:20px 0px 0px 20px;}

.box1{width: 50%; height:15px; background: linear-gradient(to right, #f5911e 40%, #d91f2b, #d91f2b);}

.box2{width: 50%; height:15px; background: linear-gradient(to right, orange, #d91f2b);}

/*background: -webkit-linear-gradient(red 5%, green 15%, blue 60%);*/

</style>

</head>

<body>

<div class="box box1"></div>

<div class="box box2"></div>

</body>

</html>

css---颜色过渡渐变的更多相关文章

  1. CSS 3 学习——渐变

    通过CSS渐变创建的是一个没有固定比例和固定尺寸的<image>类型,也就是说是一张图片,这张图片的尺寸由所应用的元素的相关信息决定.凡是支持图片类型的CSS属性都可以设置渐变,而支持颜色 ...

  2. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

  3. SVG颜色、渐变和填充

    颜色 RGB和HSL都是CSS3支持的颜色表示方法,一般普遍使用是RGB.PS:HSL浏览器兼容. RGB RGB即是代表红.绿.蓝三个通道的颜色,通过对红(R).绿(G).蓝(B)三个颜色通道的变化 ...

  4. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  5. CSS颜色代码

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  6. 第 14 章 CSS 颜色与度量单位

    学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一．颜色表方案 颜色的表现形式主要有 ...

  7. CSS 颜色代码大全

    CSS颜色: 转载:http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

  8. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  9. WPF [调用线程无法访问此对象，因为另一个线程拥有该对象。] 解决方案以及如何实现字体颜色的渐变

    本文说明WPF [调用线程无法访问此对象,因为另一个线程拥有该对象.] 解决方案以及如何实现字体颜色的渐变 先来看看C#中Timer的简单说明,你想必猜到实现需要用到Timer的相关知识了吧. C# ...

随机推荐

  1. 学员会诊之02：SVN协作以及Page类的设计

    三层架构的学生管理系统是我们第一个稍微大型的项目:分层.一个解决方案多个Project,所以值得我们停下来好好审查审查. 1.测试SVN服务器地址 我们的作业要求学员创建自己的SVN服务器,并且将代码 ...

  2. 根据 train_test.prototxt文件生成 deploy.prototxt文件

    本文参考博文 (1)介绍 *_train_test.prototxt文件与 *_deploy.prototxt文件的不同:http://blog.csdn.net/sunshine_in_moon/a ...

  3. 用PHP纯手工打造会动的多帧GIF图片验证码

    效果演示: http://pcik.7di.net/pcik_reg 百度的效果演示: https://passport.baidu.com/cgi-bin/genimage?captchaservi ...

  4. iOS: lame框架将PCM录音转成MP3格式

    lame框架将PCM录音转成MP3格式 1.lame下载地址:https://github.com/rbrito/lame,它是一个不可执行的文件,需要借助build-lame.sh脚本将其编译成.a ...

  5. Android ViewFlipper增添ScrollView后不能滑动了

    Android ViewFlipper添加ScrollView后不能滑动了在Activity中添加ScrollView实现滚动activity的效果后,activity的滑动效果却无法生效了,原因是因 ...

  6. Extjs的grid的单元格中加载超链接和按钮

    效果: 户型图列显示的图片实际上就是一个超链接. 添加一个Button分2个步骤:1.在列头中定义超链接列或者Button列的HTML代码,也就是Render 2.添加该Button的事件处理函数.其 ...

  7. Open-Source performance testing tools(From other site)

    http://www.appdynamics.com/blog/php/tools-of-the-trade-for-performance-and-load-testing/

  8. hihocoder第238周：杨氏矩阵的个数

    题目链接 问题描述 给定一个N行M列的矩阵,往里面填入$1-N\times M$个数字,使得这个矩阵每行.每列都满足递增.问:有多少种填法? 问题分析 这个问题很难,如果能够直接想到,那就是天才了. ...

  9. Effective Java 第三版——45. 明智审慎地使用Stream

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  10. jQuery Address全站 AJAX 完整案例详解

    本文详细介绍如何利用 jQuery 框架以及 jQuery Address 插件实现最基本的全站 AJAX 动态加载页面内容的功能的方法. 案例目标 以常见基本结构的网站为案例,实现全站链接 AJAX ...