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, ...);

demo:

#grad
{
  background: -webkit-linear-gradient(left, red 0, blue 100%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red 0 , blue 100%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red 0, blue 100%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red 0, blue 100%); /* Standard syntax */
}

Radial Gradients

语法:

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

Text Effects

• text-shadow （文本阴影）
• word-wrap （换行设置）

text-shadow

//参数跟box-shadow差不多
.text-shadow {
  text-shadow: 5px 5px 5px #FF0000;
}

word-wrap（对于一些很长的单词来说，强制换行不容易产生bug）

.article-content {
  word-wrap:break-word;
}