如果你不知道浏览器的特定声明是什么,你只需要记住它们都是CSS样式属性前与内核提供商有关的特定前缀。因为CSS3目前还没得到全面的支持,所 以我们需要使用这些特定声明。具体的形式如下:
你可能已经看到了,使用这些声明的有一个缺点,那就是如果我们想在Firefox,Safari和Chrome中都得到CSS3的效果,我们需要使 用到上面所有这些前缀。也不用惊讶,IE浏览器不支持CSS3,因此也就不像其他主要浏览器有一个特定的前缀声明。 好了,我们已经讲的够多了,我们马上尝试一下。注意:样式声明 去掉这些前缀就是W3标准的实际规范提议。 关于这个页面的Demo(实例)说明所有这些例子都是在这个页面里面,如果你不能正常查看实例的效果(或者只能查看部分),那说明你正在使用的浏览器并不支持这些CSS3效果 阴影效果阴影效果接受多个参数值。第一个是阴影的颜色,它还接受另外四个长度(lenght)值,前两的长度值分辨是X(水平)偏移量和Y(垂直)偏移量。 接下一个参数是反映模糊度的数值。第四也是最后一个值是用来定义模糊的散布程度。 box-shadow: #333 3px 3px 4px;-moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px; 阴影效果演示
渐变效果CSS3的渐变样式刚开始很容易让人混淆,尤其-moz 和-webkit的渐变之间还存在不同。在-moz中,你首先需要定义渐变的方向,然后定义起始和终
止的颜色。而-webkit的渐变则稍稍复杂一些,首先你需要定义渐变的类型,然后接下来两个值定义方向,最后两个值定义了渐变的起始颜色和终止颜色。 -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147)); :渐变效果演示实例
RGBA颜色模式RGBA的颜色定义实际用起来没有给人的感觉那么复杂,它接受四个参数值,以此是:红色值,绿色值,蓝色值,以及透明度。我们不用hex(#)16 进制值的颜色,我们以RGB的模式来设置颜色,其中,透明度可以设置颜色的透明效果。透明度的取值范围在0到1之间,0是完全不透明,1是颜色完全透明。 下面这些演示例子的透明度都是0.5,元素的透明度是50%,rgba不需要附加任何特定的浏览器前缀声明。 background-color: rgba(0, 54, 105, .5);HSL色彩模式(色调H,饱和度S ,亮度L)除了RGBA,CSS3也支持HSL颜色模式。这给我们在颜色和色调的选择上提供了充足的余地。在HSL这种色彩模式中的H代表色调,S代表色
度,L代表亮度。色调是色盘上角度值 ,而保饱和度和亮度则是颜色的百分比值。 HSL演示实例
边框颜色要使用这一CSS样式,你需要分别定义border-top, border-right, border-bottom,
和border-left
才能获得下面的效果。你注意到定义一个8像素的边框,然后边框又定义了8种不同的颜色。这因为边框的颜色数量必须与边框的像素宽度值相对应。 -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草案中移除鸟,但是我们希望稍后它在添加进来。 文本选择颜色演示变形有了变形样式,你可以让元素的外观在鼠标悬停时变大。给Scale(比例)值设置一个大于1的数值,元素就会便打。反过来或,如果值小于1,元素的 大小就会缩小。除了Scale比例,它还有其他许多不同的变形方式可用。你可以访问Firefox的开发者页面,查看它们所能实现的效果 -moz-transform: scale(1.15);-webkit-transform: scale(1.15);变形效果演示多栏布局有了这个新的多栏布局样式,你可以给文本呈现类似”报纸“排版的效果。跟在CSS2中的实现方法相比,CSS3中,我们实现这类效果要简单的多。下
面,我指定鸟所需要的列数量,以及分离的规则类型,栏与栏之间的空隙有多大。用起来很简单是吧 多栏布局演示总结我希望跟我一样,对CSS3的这些特性感到激动。他给网页设计师和开发者更多的力量,并且让许多方面都简化不少。现在,我们只需等待所有浏览器支持 它。当然,我这里演示的知识CSS3新功能的冰山一角。 |
|