CSS3新特性与浏览器兼容

Flexbox

background

注意事项：

加载图片失败时UA会使用background-color，所以在设置background-image时一定要同时设置background-color作为fallback
设置前景色color时，要同时设置background-color，反之亦然
使用rgba的时候也要设置fallback color

linear-gradient

background: linear-gradient(#fff, #333);

IE9-兼容：

使用一个1px宽的渐变带png/svg图像，并repeat-x

完整fallback代码如下：

由于CSS层叠特性，代码后面的规则会覆盖前面的规则，所以在支持linear-gradient的浏览器里不会加载gradient.png 详细讨论: 渐变生成器，生成代码支持IE6+

1
2
3
4
5
6
7
8
/* Fallback */
background-color: #666;
/* IE fallback */
background-image: url(gradient.png);
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(#fff, #333);
background-image: -moz-linear-gradient(#fff, #333);
background-image: linear-gradient(#fff, #333);

background-size

background-size: cover;

cover将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

multiple background

多个背景图像在一个元素上，图像顺序为越在后面的越在元素底部

background: url("top.png"), url("middle.png"), url("bottom.png");

背景透明

直接使用opacity

IE9+

opacity: 0.5;

IE6+可使用IE私有滤镜属性filter

filter: alpha(opacity=50);  /* for IE6+ */
opacity: 0.5;               /* for IE9+, firefox, chrome */

还可直接用rgba

background-color: rgba(0, 0, 0, 0.5); /* IE9+ */

旋转 && 缩放

旋转和缩放加上transition可以实现很漂亮的CSS动画

transform

transform: rotate(5deg) scale(0.85, 0.9);

box-shadow

box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.1);

参数说明：

inset: 内阴影(可选)
阴影横向水平偏移，可以为负
阴影横向垂直偏移，可以为负
阴影模糊值，不可为负；值越大越模糊
阴影外延值，可以为负；
颜色

text-shadow的参数与之类似，就不多做说明了

要求IE9+，若想兼容低版本IE，可将阴影制作成图片（1px width，高度不定），在元素内添加两个span，并采用绝对定位并repeat某个方向即把阴影“贴”在元素盒子上

可以设置多个shadow从而实现多边框(border)效果

border-radius

边框圆角。要求IE9+，可通过CSS3 PIE支持到IE6+

文章目录