数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类 全部分类技术牛文全部分类教程最新 网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava 新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销 开发数据库服务器系统虚拟化云计算 嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

日期:2016/5/25 18:02:00 来源:本网整理
s">

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

作者:后乐 字体:[增加 减小] 类型:转载 时间:2016-05-05 我要评论

这篇文章主要介绍了《CSS3实战》笔记--渐变设计(二,需要的朋友可以参考下 ">

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

-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)

参数说明:

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

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

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

直线渐变的基本用法

/*最简单的线性渐变,只需要指定开始颜色和结束颜色,则默认从上到下实施线性渐变*/
background: -moz-linear-gradient(red, blue);

演示效果:
这里写图片描述

/*从左上角到右下角的渐变,其中top关键字设置起点的x轴,left关键字设置起点的y轴坐标*/ 
background: -moz-linear-gradient(top left,red, blue)

演示效果:
这里写图片描述

/*设置从左到右的五彩渐变,其中y轴坐标默认为center,多个色标按步长平均显示*/
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

演示效果:
这里写图片描述

/*从左上角到右下角的红色渐变,其中红色逐渐减弱,并最终显示为透明*/
background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

演示效果:
这里写图片描述

/*设置角度值*/
background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));

演示效果:
这里写图片描述

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

/*从上到下的多彩渐变,其中在y轴的80%的位置,添加一个绿色色标,设计三色渐变效果。如果没有指定位置则三色会均匀分布*/
background: -moz-linear-gradient(top, blue, green 80%, orange);

演示效果:
这里写图片描述

/*设计渐变半透明的效果的背景图片,在背景图片上面覆盖一层从左到右为白色到透明的渐变填充层*/ 
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);

演示效果:
这里写图片描述

径向渐变的基本语法

-moz-radial-gradient([<position> || <angle>,]?[shape] || <size>,]? <syop>,<stop>[,<stop>]*)

该函数的参数说明:

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

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

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

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

径向渐变的基本语法

/*最简单的径向渐变,从中间向外由红色,黄色到蓝色渐变显示*/
background: -moz-radial-gradient(red, yellow, blue);

演示效果:
这里写图片描述

/*最简单的径向渐变,从中间向外由红色,黄色道蓝色渐变显示,并设置不同色标的显示位置*/
background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);

演示效果:
这里写图片描述

/*径向渐变,从左下角向外由红色,黄色,蓝色渐变显示,并设置蓝色色标的显示位置*/
background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);

显示效果:
这里写图片描述

/*径向渐变,形状为圆形。从左侧中间向外由红色,黄色到蓝色渐变显示,并设置蓝色色标的显示位置*/
background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);

演示效果:
这里写图片描述

/*径向渐变,形状为椭圆。从中间向外由红色,黄色到蓝色渐变显示,并设置渐变尺寸为cover关键字*/
background: -moz-radial-gradient(ellipse cover, red, yellow, blue);

演示效果:
这里写图片描述

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

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

background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);

演示效果:
这里写图片描述

background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);

演示效果:
这里写图片描述

渐变的应用

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Webkit引擎的应用</title><style type="text/css">body {/*页面初始化*/ background-color: #454545; margin:1em; padding:0;}.box {/*设计模块样式*/ -moz-border-radius: 10px;/*设计圆角*/ -moz-box-shadow: 0 0 12px 1px rgba(205, 205, 205, 1);/*设计阴影特效*/ border: 1px solid black; padding: 10px; max-width: 600px;/*最大宽度显示*/ margin: auto;/*居中显示*/ text-shadow: black 1px 2px 2px;/*设计文本包含阴影*/ color: white; background-image: -moz-linear-gradient(bottom, black, rgba(0, 47, 94, 0.2), white); /*设计直线渐变背景*/ background-color: rgba(43, 43, 43, 0.5);}.box:hover {/*设计鼠标经过时,放大阴影亮度*/ -moz-box-shadow: 0 0 12px 5px rgba(205, 205, 205, 1);}h2 {/*在标题前面添加额外内容*/ font-size: 120%; font-weight:bold; text-decoration:underline;}h2:before { content: "标题:";}p { padding: 6px; text-indent:2em; line-height:1.8em; font-size:14px;}</style></head><body><div class="box"> <h2>关于文字</h2> <p>我对随便哪种感觉的文字上手都很快。曾经我用一天的时间看完《第一次亲密接触》然后第二天就写出了两万多字类似的东西,把同  学吓得目瞪口呆。尽管我认为那种东西几乎没有存在的价值,时光可以轻而易举地把它淹没得不留一丝痕迹。 </p> <p>我把考试中得到满分的作文随便丢掉,却把老师说的毫无内涵的文章装订好放在抽屉里。我常把自己的故事写下来然后拿给同学看,  然后他们感动得一塌糊涂。 </p> <p>……</p></div></body></html>

演示效果:

这里写图片描述

  • 本文相关:
  • 《CSS3实战》笔记--渐变设计(三)
  • CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
  • 利用CSS3新特性创建透明边框三角
  • 手机屏幕尺寸测试——手机的实际显示页面的宽度
  • CSS 使用Sprites技术实现圆角效果
  • 完美实现浮动元素横排居中显示
  • 讨论CSS中的各类居中方式
  • 如何使用CSS3画出一个叮当猫
  • 三个不常见的 HTML5 实用新特性简介
  • css代码优化的12个技巧
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved