位置: 编程技术 - 正文

《CSS3实战》笔记--渐变设计(二)(css教程笔记)

编辑:rootadmin

推荐整理分享《CSS3实战》笔记--渐变设计(二)(css教程笔记),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css教程笔记,css3基础知识,css教程笔记,css教程笔记,css实战训练,css3实战手册第3版,css3实战手册第3版,css3基础知识,内容如对您有帮助,希望把文章链接给更多的朋友!

Gecko引擎的CSS渐变设计直线渐变基本语法

参数说明:

<point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right 关键字定义 x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标。当指定一个值时,另一个值默认为 center 。

<angle>:定义直线渐变的角度。单位包括deg,grad(梯度,度 = grad),rad (弧度,一圈等于2*PI rad)。

<stop>:定义步长,用法与Webkit引擎的color-stop()函数相似,但是该参数不需要调用函数,直接传递函数即可。其中第一个参数设置颜色,可以为任何合法的颜色值,第二个值设置颜色的位置,取值为百分比(0~%)或者数值,也可以省略步长设置。

直线渐变的基本用法

演示效果:

演示效果:

演示效果:

演示效果:

演示效果:

小结:当指定角度时,是沿水平线按逆时针旋转定位的。因此,设置0deg,将产生从左向右的水平渐变,而设置度,将创建一个从底部到顶部的渐变。

演示效果:

演示效果:

径向渐变的基本语法

该函数的参数说明:

《CSS3实战》笔记--渐变设计(二)(css教程笔记)

<point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right关键字定义x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标。当指定一个值时,则另一个值默认为center。

<angle>:定义直线渐变的角度。单位包括deg,grad(梯度,度 = grad),rad (弧度,一圈等于2*PI rad)。

<stop>:定义步长,用法与Webkit引擎的color-stop()函数相似,但是该参数不需要调用函数,直接传递函数即可。其中第一个参数设置颜色,可以为任何合法的颜色值,第二个值设置颜色的位置,取值为百分比(0~%)或者数值,也可以省略步长设置。

:定义圆半径,或者椭圆的轴长度n

径向渐变的基本语法

演示效果:

演示效果:

显示效果:

演示效果:

演示效果:

小结: size参数包含多个关键字,closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。

另外,Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性,用来定义重复直线渐变和重复径向渐变。

演示效果:

演示效果:

渐变的应用

演示效果:

《CSS3实战》笔记--渐变设计(三) IE浏览器引擎的CSS渐变实现方法IE并不支持CSS渐变,但是提供了渐变滤镜,可以用来实现简单的渐变效果。基本语法该参数的参数说明如下:enabled:设置

CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效 今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的。呵呵,超酷啊。一、HTML代码:因为是CSS3实现,所以

html5手机触屏touch事件介绍 HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日

标签: css教程笔记

本文链接地址:https://www.jiuchutong.com/biancheng/368712.html 转载请保留说明!

上一篇:《CSS3实战》笔记--渐变设计(一)(css实战手册)

下一篇:《CSS3实战》笔记--渐变设计(三)(css教程实例)

  • 一般纳税人增值税怎么做账务处理
  • 新公司需要去当地街道报备劳动关系证明吗
  • 小规模纳税人缴纳增值税怎么算
  • 制造费用的结转公式
  • 收到备用金的会计分录怎么写
  • 个人独资企业生产经营所得汇算清缴时间
  • 调试费含税吗
  • 基本户购买支票需要什么
  • 房地产企业如何进行市场细分
  • 离退休人员的返乡政策
  • 受托开发软件产品免征增值税
  • 公益性捐赠可以结转几个年度
  • 固定资产投资转化为gdp比例
  • 汇算清缴跨年发票
  • 厂家给经销商的授权书
  • 投资性房地产租赁期开始日
  • 售后人员出差计入哪个科目
  • 通过无偿取得的成果
  • 从支付宝里可以查出结婚个人信息吗
  • 代收代付给个人
  • 白蚁防治费怎么计算
  • 烟酒发票可以抵扣所得税吗
  • 纳税人财务会计核算办法怎么上传
  • 管家婆已过账销售单如何删除
  • 金蝶财务软件不能反结账
  • 出租车发票有出租车信息吗
  • 小规模纳税人跨月冲红退税
  • 工程建设劳务费怎么算
  • 远期外汇合约套期会计分录
  • 设备安装公司如何经营
  • 财务费用错记成管理费用
  • 材料按计划成本计价下,外购材料结算
  • 搬迁补偿费如何做账
  • php close
  • 存货跌价准备的转销会计分录
  • 小规模企业要交哪些税种
  • fdisk cfdisk
  • 代建工程开发成本核算应设置的会计科目是( )
  • sql server中变量声明的命令是什么
  • 进项税额转出忘记申报咋办
  • 工业企业取得土地收益
  • 福利费要分部门吗
  • 哪些合同必须签订书面合同
  • 个人注册公司是否可以免税
  • 暂存款账务处理
  • 货物退回并补货什么意思
  • 小规模纳税人销售商品会计分录
  • 个人独资公司对外如何承担责任
  • MySQL错误什么意思
  • 退货给谁
  • 计提投资性房地产折旧会计科目
  • 应付票据是
  • 科研专用费是什么
  • 投资收益的账务怎么处理
  • 如何处理消防安全事件
  • iis w3svc
  • archlinux安装zsh
  • unix操作系统有哪些主要特色
  • linux里top
  • WinCfg32.exe - WinCfg32是什么进程
  • 进程acore已停止一直出现怎么办
  • cmd指令让电脑乱码
  • centos必学的60个命令
  • centos7 本地yum
  • rpcclient.exe - rpcclient是什么进程 有什么用
  • windows8功能设置
  • win8 账户头像怎么改
  • win10升级补丁后死机
  • 微软星期二补丁
  • cocos2dx游戏开发进阶卷这本书怎么样
  • cocos2d环境配置
  • SlidingMenu属性详解【Android】
  • javascript运算
  • unity3.
  • 基于unity的游戏开发
  • javascript中checkbox使用方法简单实例演示
  • javascript面向对象编程
  • 开票信息不一致怎么回事
  • 京东开的店
  • 小孩一卡通丢了去哪里补办,需要什么证件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设