首页/文章/ CSS /CSS3 一些新特性/

CSS3 一些新特性

发布于 12-26 15:26

新增很多选择器

常用的有:

  • :first-of-type 选择其父元素的第一个目标元素
  • :last-of-type 选择其父元素的最后一个目标元素
  • :nth-of-type(n) 选择其父元素的第n个目标元素
  • :first-child 选择其父元素的第一个子元素
  • :last-child 选择其父元素的最后一个子元素
  • :nth-child(n) 选择其父元素的第n个子元素
  • :disabled 选择每一个禁用的输入元素


动画

transition: property duration timing-function delay /* 简写 */

  • transition-property: none | all | property /* 规定应用过渡的 CSS 属性的名称
  • transition-duration: time /* 规定过渡效果所需要的时间,默认为0 */
  • transition-timing-function: cubic-bezier(n,n,n,n) | ease | ... /* 规定过渡效果的时间曲线,默认为 ease */
  • transition-delay: time /* 延迟开始的时间,默认为0 */


transform: none | transform-function /* 对元素进行平移、缩放、旋转和倾斜 */

transform-origin: x y z /* 改变转换元素的原点,默认为 50% 50% 0 */


animation: name duration timing-function delay iteration-count direction fill-mode play-state /* 简写 */

  • animation-name: none | keyframes-name /* @keyframes 动画名 */
  • animation-duration: time /* 完成动画所需要的时间,默认为0 */
  • animation-timing-function: cubic-bezier(n,n,n,n) | ease | ... /* 规定动画一周期的时间曲线,默认为 ease */
  • animation-delay: time /* 延迟开始的时间,默认为0 */
  • animation-iteration-count: n | infinite /* 规定动画播放次数,默认为 1 */
  • animation-direction: normal | reverse | alternate | alterate-reverse /* 是否(交替)反向运动,默认为 normal */


边框

  • border-radius
  • border-image
  • box-shadow


背景

  • background-clip: border-box | padding-box | content-box /* 指定背景画区,默认为 border-box */
  • background-origin: border-box | padding-box | content-box /* 指定 background-position 相对位置 */
  • background-size
  • background-image 支持渐变背景,线性渐变 linear-gradient , 径向渐变 radial-gradient ,重复的:repeating-linear-gradient 、 repeating-linear-gradient


文本

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break


字体

  • @font-face


多列文本

  • columns: width count /* 简写 */
  • column-count
  • column-gap
  • column-rule
  • column-width: width type color


用户界面

  • resize: none | both | horizotal | vertical /* 允许用户调整元素的大小 */
  • box-sizing: border-box


轮廓

  • outline-offset 边框与轮廓的间隙