css3实例你该当知道的几个CSS3技巧，若是你不知道浏览器的特定声明是什么，你只需求记住它们都是CSS款式属性前与内核供应商相关的特定前缀。由于CSS3目前还没获得片面的支撑，所以我们必要利用这些特定声明。具体的情势如下：

　　Mozilla/Firefox/Gecko浏览器的前缀:-moz-

　　Webkit(Sari/Chrome)浏览器的前缀:-webkit-（留意：一些Wbkit的前缀只能正在Sari下利用，Chrome不支撑。）

　　你可能曾经看到了，利用这些声明的有一个错误真理，那就是若是我们想正在Firefox，Sari战Chrome中都获得CSS3的结果，我们必要利用到所有这些前缀。也不消惊异，IE浏览器不支撑CSS3，因此也就不像其他次要浏览器有一个特定的前缀声明。

　　好了，我们曾经讲的够多了，我们登时测验测验一下。留意：款式声明去掉这些前缀就是W3尺度的隐真规范筑议。

　　关于这个页面的Demo（真例）申明

　　所有这些例子都是正在这个页面内里，若是你不克不及普通查看真例的结果（或者只能查看部门），那申明你正正在利用的浏览器并不支撑这些CSS3结果

　　暗影结果

　　暗影结果接管多个参数值。第一个是暗影的颜色，它还接管别的四个幼度（lenght）值，前两的幼度值分辩是X（程度）偏移量战Y（垂直）偏移量。接下一个参数是反应恍惚度的数值。第四也是最月朔个值是用来界说恍惚的水平。

　　box-shadow:#3333px3px4px;

　　-moz-box-shadow:#3333px3px4px;

　　-webkit-box-shadow:#3333px3px4px;

　　暗影结果演示

　　渐变结果

　　CSS3的渐变款式刚起头很容易让人混合，特别-moz战-webkit的渐变之间还具有分歧。正在-moz中，你起首必要界说渐变的标的目标，然后界说肇始战终止的颜色。而-webkit的渐变则稍稍庞大一些，起首你必要界说渐变的类型，然后接下来两个值界说标的目标，最后两个值界说了渐变的肇始颜色战终止颜色。

　　-moz-linear-gradient(-90deg，#1aa6de，#022147);

　　-webkit-gradient(linear，lefttop，leftbottom，from(#1aa6de)，to(#022147));

　　渐变结果演示

　　RGBA颜色模式

　　RGBA的颜＊＊说隐真用起来没有给人的感受那么庞大，它接管四个参数值，以此是：赤色值，绿色值，蓝色值，以及通明度。我们不消hex（#）16进造值的颜色，我们以RGB的模式来设置颜色，此中，通明度能够设置颜色的通明结果。通明度的与值范畴正在0到1之间，0是彻底欠亨明，1是颜色彻底通明。下面这些演示例子的通明度都是0.5，元素的通明度是50%，rgba不必要附加任何特定的浏览器前缀声明。

　　rgba(0，54，105，.5);

　　HSL色彩模式（色调H，饱战度S，亮度L）

　　除了RGBA，CSS3也支撑HSL颜色模式。这给我们正在颜色战色调的与舍上供应了富足的余地。正在HSL这种色彩模式中的H代表色调，S代表色度，L代表亮度。色调是色盘上角度值，而保饱战度战亮度则是颜色的百分比值。

　　hsl(209，41.2%，20.6%);

　　HSL演示真例

　　边框颜色

　　要利用这一CSS款式，你必要别离界说border-top，border-right，border-bottom，战border-left才能得到下面的结果。你留意到界说一个8像素的边框，然后边框又界说了8种分歧的颜色。这由于边框的颜色数量必需与边框的像素宽度值绝对应。

　　8pxsolid#000;

　　-moz-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;

　　-moz-border-top-colors:#555#666#777#888#999#aaa#bbb#ccc;

　　-moz-border-left-colors:#555#666#777#888#999#aaa#bbb#ccc;

　　-moz-border-right-colors:#555#666#777#888#999#aaa#bbb#ccc;

　　边框颜色演示

　　文本与舍颜色设置

　　我不得不要说文本与舍颜色的界说是一个相当冲动的新成效。当我第一次正在CSS技巧上看到这个是，我正在感觉它很是知心。有了::selection这对伪对象（pseudo-element），你能够正在用户选一段文本元素时改观颜色战布景。若是你问的见地，我会感觉这很是标致。固然::selection曾经主目前的CSS3草案中移除鸟，可是我们但愿稍后它正在增添进来。

　　::selection{background:#3C0;/Sari/#90C;}::-moz-selection{background:#3C0;/Firefox/#90C;}

　　文本与舍颜色演示

　　变形

　　有了变形款式，你能够让元素的外不雅正在鼠标悬停时变大。给Scale（比例）值设置一个大于1的数值，元素就会便打。反过来或，若是值小于1，元素的巨细就会胀小。除了Scale比例，它另有其他很多分歧的变形体例可用。你能够拜候Firefox的开辟者页面，查看它们所能真隐的结果

　　-moz-transform:scale(1.15);-webkit-transform:scale(1.15);

　　变形结果演示

　　多栏结构

　　有了这个新的多栏结构款式，你能够给文本呈隐雷同”“排版的结果。跟正在CSS2中的真隐方式比拟，CSS3中，我们真隐这类结果要简略的多。下面，我指定鸟所必要的列数量，以及分手的法则类型，栏与栏之间的空地有多大。用起来很简略是吧

　　-moz-column-count:3;-moz-column-rule:solid1pxblack;-moz-column-gap:20px;

　　多栏结构演示

　　总结

　　我但愿跟我一样，对CSS3的这些特到冲动。他给网页设想师战开辟者更多的气力，而且让很多方面都简化不少。隐正在，我们只需期待所有浏览器支撑它。当然，我这里演示的学问CSS3新成效的冰山一角。若是你想领会更多音讯，技巧战协助，我你拜候下面这些网站进修。