CSS3有哪些新特性？（第3期）

• • CSS3有哪些新特性？

CSS3有哪些新特性？

• 新增選擇器

  p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

• 彈性盒模型

  display: flex;

• 多列布局

  column-count: 5;

• 媒體查詢

  @media (max-width: 480px) {.box: {column-count: 1;}}

• 個性化字型

  @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}

• 顔色透明度

  color: rgba(255, 0, 0, 0.75);

• 圓角

  border-radius: 5px;

• 漸變

  background:linear-gradient(red, green, blue);

• 陰影

  box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

• 倒影

  box-reflect: below 2px;

• 文字裝飾

  text-stroke-color: red;

• 文字溢出

  text-overflow:ellipsis;

• 背景效果

  background-size: 100px 100px;

• 邊框效果

  border-image:url(bt_blue.png) 0 10;

• 轉換
  • 旋轉

    transform: rotate(20deg);

  • 傾斜

    transform: skew(150deg, -10deg);

  • 位移

    transform:translate(20px, 20px);

  • 縮放

    transform: scale(.5);

• 平滑過渡

  transition: all .3s ease-in .1s;

• 動畫

  @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;