Flexbox

dive into flexbox

background

注意事项:

  1. 加载图片失败时UA会使用background-color,所以在设置background-image时一定要同时设置background-color作为fallback
  2. 设置前景色color时,要同时设置background-color,反之亦然
  3. 使用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);

参数说明:

  1. inset: 内阴影(可选)
  2. 阴影横向水平偏移,可以为负
  3. 阴影横向垂直偏移,可以为负
  4. 阴影模糊值,不可为负;值越大越模糊
  5. 阴影外延值,可以为负;
  6. 颜色

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

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

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

border-radius

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