Html5--6-46 渐变效果

学习要点

  • 掌握线性渐变和径向渐变的使用

线性渐变： 属性：linear-gradinet(开始位置 角度，起始颜色，终止颜色 )

  • 开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）
  • 角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用
  • 起始颜色......
  • 终止颜色......
  • 重复渐变将属性修改为：repeating-linear-gradinet()

径向渐变(放射渐变)：
属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)

  • 形状:ellipse（椭圆）/circle（圆形）
  • 发散方向：属性值可以为left、right、top、bottom、center（可组合使用）
  • 大小(半径)：属性值可用像素或关键字表示
    • closest-side:圆心到距离最近的边
    • farthest-side:圆心到距离最远的边
    • closest-corner：圆心到距离最近的角
    • farthest-corner：圆心到距离最远的角
  • 起始颜色......
  • 终止颜色......
  • 重复的径向渐变：repeating-radial-gradinet()

Html5--6-46 渐变效果的更多相关文章

  1. 直接拿来用！最火的iOS开源项目

    1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是G ...

  2. 转_IOS开源

    http://www.csdn.net/article/2013-06-05/2815530-GitHub-iOS-open-source-projects-one 苹果App Store本身所具有的 ...

  3. IOS常用开源库

    转自:http://www.csdn.net/article/2013-06-18/2815806-GitHub-iOS-open-source-projects-two/1 1. AFNetwork ...

  4. Bootstrap风格登录界面设计样例

    参考:http://bootsnipp.com/tags/login Register Page   127.8K 187 Modal Login with jQuery Effects   159. ...

  5. 直接拿来用！最火的iOS开源项目（一~三）

    结束了GitHub平台上“最受欢迎的Android开源项目”系列盘点之后,我们正式迎来了“GitHub上最受欢迎的iOS开源项目”系列盘点.今天,我们将介绍20个在GitHub上非常受开发者欢迎的iO ...

  6. 直接拿来用！最火的iOS开源项目（三）

    相比Android,GitHub上的iOS开源项目更可谓是姹紫嫣红.尽管效果各异,但究其根源,却都是因为开发者本身对于某种效果的需求以及热爱.在“直接拿来用!最火的iOS开源项目”系列文章(一).(二 ...

  7. 46.前端html5标签学习

    HTML:TR  TD  TH  OL  UL  LI 这几个标签要区别 一.什么是HTML: 超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用: 是 ...

  8. html5实现渐变效果

    <canvas id='test01'></canvas> <script> function draw25(id) { var canvas = document ...

  9. 小强的HTML5移动开发之路（46）——汇率计算器【2】

    在上一篇中我们完成了汇率计算页面,下面来完成汇率设置页面的显示. <div class="setRates"> <div class="header&q ...

  10. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

随机推荐

  1. zoj 3812 We Need Medicine (dp 状压)

    先贴一下转载的思路和代码,,,:http://blog.csdn.net/qian99/article/details/39138329 状压dp博大精深啊,以后看到n<=50都可以往状压上想, ...

  2. python 之文件操作

    一.文件基本操作 1.文件的打开 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作 文件句柄 = open('文件路径', '模式') 2. ...

  3. Gradle讲解

    简介: Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置. ...

  4. 转：Linux字符编码方式

    首先,解释一下字符集: 汉字编码: * GB2312字集是简体字集,全称为GB2312(80)字集,共包括国标简体汉字6763个. * BIG5字集是台湾繁体字集,共包括国标繁体汉字13053个. * ...

  5. Java常用的集合类（转）

    继上一篇文章http://www.cnblogs.com/EasonJim/p/6937690.html中介绍的集合类有非常多,但是在实际使用中,最常用的应该是下面这几种: Java的集合框架分为Li ...

  6. ASP.NETCore使用AutoFac依赖注入

    原文:ASP.NETCore使用AutoFac依赖注入 实现代码 1.新建接口类:IRepository.cs,规范各个操作类的都有那些方法,方便管理. using System; using Sys ...

  7. 总结下JavaWeb应用里正确显示中文需要的设置

    1.前台页面需要加的设置: <%@ page contentType="text/html; charset=UTF-8"%> html标签后加上<meta ht ...

  8. mysql 安装与配置、使用

    http://www.cnblogs.com/shenliang123/p/3203546.html CentOs中mysql的安装与配置 在linux中安装数据库首选MySQL,Mysql数据库的第 ...

  9. Bean property XX&#39; is not writable or has an invalid setter method

    刚刚搞spring.property注入时遇到这个问题,百度一下.非常多人说是命名或者get set方法不一致的问题,可是这个我是知道的.写的时候也注意到这些.所以应该不是这个问题.以为是xml头写的 ...

  10. v-on指令

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...