css3有哪些新特性

CSS3是CSS的升級版本，在標準化前已經先行推出了許多最新的規範，包含了許多新功能。 CSS3 的出現改變了我們網頁設計的方式，更有彈性。以下我們將詳細介紹CSS3的新特性。

1. 強大的選擇器

CSS3引進了一系列新的選擇器，用來更細緻的選擇我們想要的元素，強化了CSS的選擇能力，讓頁面設計更有彈性方便。例如：

• 屬性選擇器（Attribute selectors）
• 偽類別選擇器（Pseudo-class selectors）
• 偽元素選擇器（Pseudo-element selectors）
• 子選擇器（Child selectors）
• 相鄰兄弟選擇器（Adjacent sibling selectors）
• 通用選擇器（Universal selectors）

2. #文字效果

CSS3新增了一些文字效果，例如：

• 文字陰影（Text shadow）
• 文字漸層（Text gradient）
• 字形，字間距，字間間距（Letter-spacing, Word-spacing）
• 文字裝飾（Text decoration）
• 單字斷行（Word-break）

3. 盒子效果

CSS3的盒子效果更為強大，新增了許多屬性，例如：

• 圓角（Border-radius）
• 陰影（box-shadow）
• 顏色和透明度（RGBA, HSLA）
• 多列佈局（Multi-columns layout）
• 邊框圖片（Border image）
• 變形（Transform）
• 過渡（Transition）
• 動畫（Animation）

@media screen and (min-width: 1024px) {
  /* styles for screens with a minimum width of 1024px */
}
@media screen and (max-width: 768px) {
  /* styles for screens with a maximum width of 768px */
}

/* 2D转换 */
div {
  transform: translateY(50%);
  transform: translateZ(30px);
  transform: scale(0.5);
  transform: rotate(180deg);
}

/* 3D转换 */
div {
  transform: translate3d(30px, 50px, 10px);
  transform: rotate3d(1, 0, 0, 45deg);
  transform: scale3d(1.5, 1.5, 1.5);
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
}

以上是css3有哪些新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！