Dev.Front css3.zh_cn

css3主要包括rounded corners, shadow, gradents, transitions, animations.新的布局主要multi-columns，flexible box，grid layouts。

Borders

• border-radius

.circle {
  border-radius: 20px;
}

• box-shadow 这个属性，在ps里面能找到对应的属性值。 语法

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

//不需要写前缀
div {
  //水平阴影： 10px
  //竖直影音： 10px
  //模糊程度： 5px
  //大小： 
  //颜色： #888
  box-shadow: 10px 10px 5px #888；
}

div {
  //方位: inset 内阴影还是外阴影
  box-shadow: 10px 10px 5px #888 inset;
  //改回默认值
  box-shadow:initial; 
}

• border-image 不常用

Backgrounds

由于以下2个属性支持ie9+, ie8的情况可单独考虑。

• background-size
• background-origin

Gradients

跟ps里面的渐变的值大体相同,在实现UI图渐变的效果的时候，可考虑使用。

• Linear Gradients
• Radial Gradients (使用较少)

Linear Gradients

语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Radial Gradients

语法:

background: radial-gradient(center, shape size, start-color, ..., last-color);