CSS3 新特性有哪些？

1. 什么是 CSS

CSS，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行，用来使页面变得更美观。

2. 新样式

  • 边框：
    • border-radius：圆角；
    • box-shadow: h-shadow v-shadow blur spread color inset;：阴影；
    • border-image：边框图片。
  • 背景：
    • background-size：背景图片大小；
    • background-origin：背景定位原点（默认 padding-box）；
    • background-clip：背景绘制区域。
  • 文字：
    • text-shadow：文字阴影；
    • word-wrap: normal | break-word：长单词换行；
    • text-overflow：文本溢出处理（clip/ellipsis）。

3. transition（过渡）

transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号分隔，必须规定两项内容：

transition: <property> <duration> <timing-function> <delay>;
/* 例如： */
transition: all 0.3s ease 0s;

4. transform（转换）

transform 属性允许你旋转、缩放、倾斜或平移给定元素。

  • transform-origin：转换元素的位置（围绕哪个点进行转换），默认值为 (x,y,z):(50%, 50%, 0)。
  • 常用变换：translate、scale、rotate、skew。

5. animation（动画）

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction>;
/* 例如： */
div {
  animation: fade-in 1s ease 0s infinite alternate;
}
  • timing-function：linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier()。

6. 颜色渐变

CSS3 渐变是指在两个颜色之间平稳的过渡，包括线性渐变和径向渐变：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: radial-gradient(0deg, red, green);

补充：CSS3 还包括：

  • 选择器（属性选择器、伪类、伪元素、:not()、:nth-child() 等）；
  • 媒体查询 @media；
  • 多列布局 column-count / column-gap；
  • Flexbox / Grid 布局；
  • CSS 变量 --xxx。