css3新特性介绍

文章来自：源码在线https://www.shengli.me/css/92.html

一、浏览器前缀

为了更好地兼容需要使用浏览器前缀：

 

常见的有：

1. safari:-webkit-

2. chrome:-webkit-

3. Firefox:-moz-

4. IE:-ms-

5. Opera:-o-

    

 

首先声明带浏览器前缀的样式，然后再声明W3C标准的样式。这是为了保证当未来的浏览器只支持标准化后的CSS3样式时，你的代码仍然能够有效运行。

二、颜色

 

新增加的 rgb 样式可以允许你用数字来定义RGB的值，而不再需要使用16进制了。 如果你想自己转化两者的对应值，你可以使用Safari自带的 Web Inspector 工具，在 Styles 面板上点击相应的颜色即可。

下面的代码等同于 #FFF， 就是白色：

 

你也可以使用新增的 hsl 样式。HSL分别代表色度、饱和度、亮度。

色度：代表在颜色盘上的度数，0度表示红色，120度表示绿色，240度表示蓝色。在之间的表示相应的中间色。

饱和度：一个百分比值，100% 表示完全显示该颜色。

亮度： 也是一个百分比值，0% 表示暗（黑色），100% 表示亮（白色）。

如果采用rgb或者hsl写法，那么增加alpha透明度非常简单，只需要在后面加上一个 0 到1之间的小数即可。 0表示完全透明，1表示完全不透明。

三、圆角：border-radius属性是用来设置圆角的。

 

 

四、阴影：box-shadow属性。box-shadow 可以接受若干选项：垂直方向的偏移，水平方向的偏移，模糊的半径，阴影扩展的距离，以及颜色。如果你还给出inset选项，阴影将向容器内扩展，否者默认情况下，阴影是向容器外扩展的。另外，你也可以对一个容器使用若干个阴影，通过使用逗号隔开他们各自的定义，如同下列代码所示：

 

 

五、文字阴影text-shadow;