保藏本站 保藏本站
真钱棋牌网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > CSS/HTML > 正文

主页 - PHP - 数据库 - 操作体系 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS指令 - jQuery - CSS款式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

《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实战》笔记--突变规划(三)
IE浏览器引擎的CSS突变完成办法IE并不支撑CSS突变,可是供给了突变滤镜,能够用来完成简略的突变作用。根本语法该参数的参数阐明如下:enabled:设置

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

html5手机触屏touch事情介绍
HTML5中新增加了许多事情,可是因为他们的兼容问题不是很抱负,运用实战性不是太强,所以在这儿根本省掉,我们只共享运用广泛兼容不错的事情,日

本周排行

更新排行

强悍的草根IT技能社区,这儿应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 ystekkfj.com. All Rights Rreserved  京ICP备05050695号