仓酷云

标题: 来一发CSS教程:关于CSS突变的一些要点 [打印本页]

作者: 小妖女 时间: 2015-1-15 23:20
标题: 来一发CSS教程:关于CSS突变的一些要点
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：了解CSS3线性突变.
译自：QuickTip:UnderstandingCSS3Gradients
中文：了解CSS3突变
请尊敬版权，转载请说明来历，多谢！
为了显现一个突变而专门制造一个图片的做法是不天真的，并且很快会成为一种欠好的做法。可是遗憾的是，停止写这篇文章，大概还必需如许做，可是但愿不会延续太久。多亏Firefox和Safari/Chrome，我们如今可使用起码的勉力完成壮大的突变。在本文中，我们将展现CSS突变的复杂完成和该属性在Mozilla和webkit内核扫瞄器中的分歧。
PS：本文原文原本供应了一个视频，可是因为尽人皆知的缘故原由，我们没法寓目这个在Youtube上的视频，想看的同砚请本人想举措寓目(最高720P):http://www.youtube.com/watch?v=9D2hyM5SSCE
Webkit

只管Mozilla和Webkit一般对CSS3属性接纳一样的语法，可是关于突变，他们很不幸的不克不及告竣分歧。Webkit是第一个撑持突变的扫瞄器内核，它利用上面的布局：
/*Syntax,takenfrom:http://webkit.org/blog/175/introducing-css-gradients/*/
-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

/*Inpractice...*/
background:-webkit-gradient(linear,00,0100%,from(red),to(blue));

不要忧虑这些语法会让你看花眼，我也是如许的！只需记得我们必要用一个逗号来离隔这个参数组。

突变的范例?(linear)
突变入手下手的XY轴坐标(00–大概left-top)
突变停止的XY轴坐标(0100%大概left-bottom)
入手下手的色彩?(from(red))
停止的色彩?(to(blue))

破洛洛文章简介：了解CSS3线性突变.

Mozilla

Firefox，从3.6版本才入手下手撑持突变，更喜好和Webkit稍微分歧的语法。
/*Syntax,takenfrom:http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/*/
-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

/*InPractice*/
background:-moz-linear-gradient(top,red,blue);

[attach]292068[/attach]

请注重我们将突变的范例——linear——放到了属性前缀中了
突变从那里入手下手?(top–我们也能够利用度数，好比-45deg)
入手下手的色彩?(red)
停止的色彩?(blue)

Color-Stops

假如你不必要从一个色彩到另外一个色彩的100%突变怎样办？这就是colorstop起感化的时分了。一个广泛的计划手艺是利用一个较短而渺小的突变，好比：

注重顶部的浅灰色到红色的微小的突变

在已往，尺度的做法就是制造一个图片，并将其设为一个元素的背景图片，然后让其程度平展。但是利用CSS3，这是个小Case。
background:white;/*fallbackforolder/unsupportingbrowsers*/
background:-moz-linear-gradient(top,#dedede,white8%);
background:-webkit-gradient(linear,00,08%,from(#dedede),to(white));
border-top:1pxsolidwhite;
此次，我们让突变停止于8%，而不是默许的100%。请注重我们也在头部接纳了一个边框，以构成对照。这很经常使用。
假如我们想要增加多一种(几种)色彩，我们能够如许做：
background:white;/*fallbackforolder/unsupportingbrowsers*/
background:-moz-linear-gradient(top,#dedede,white8%,red20%);
background:-webkit-gradient(linear,00,0100%,from(#dedede),color-stop(8%,white),color-stop(20%,red);

关于-moz版本，我们界说，从元素的20%的高度的中央入手下手是白色。
而关于-webkit，我们利用color-stop，接纳两个参数：那里入手下手中断，利用哪一种色彩。

IE

IE其实不撑持CSS突变，可是供应了突变滤镜，能够完成最复杂的突变效果：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ff0000);/*IE6,IE7*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ff0000)";/*IE8*/
PS：现实上，我们在《RGBa色采的扫瞄器撑持》提到的IE的办理办法，就是利用这个突变滤镜。
关于CSS突变的一些要点：

尽量的利用它。假如让IE用户看到一个流动的纯色，我勉励你利用这类办法；
IE6/7/8,Opera,Safari3,和Firefox3不克不及衬着CSS3突变，Firefox和Safari用户一般常常晋级扫瞄器，而Chrome的主动晋级机制会在背景主动晋级，以是这并非个年夜成绩；
老是为不撑持这些扫瞄器公有属性的扫瞄器使用一个默许的，纯色背景；
永久不要利用白色到蓝色的突变，就像我用作例子的这类；
页面不必在每一个扫瞄器内里看起来完整一样！
Firefox可使用角度来设定突变的偏向，而webkit只能利用x和y轴的坐标。

</p>
标准的选择器不能格式化一个元素内容的第一个字母或者第一行，而伪元素选择器能实现

作者: 深爱那片海 时间: 2015-1-21 12:20
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 只想知道 时间: 2015-1-30 18:07
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 海妖 时间: 2015-2-6 14:46
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 乐观 时间: 2015-2-16 16:48
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 愤怒的大鸟 时间: 2015-3-5 07:54
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 金色的骷髅 时间: 2015-3-12 02:39
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 老尸 时间: 2015-3-19 17:49
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

欢迎光临仓酷云 (http://ckuyun.com/)