是什么

css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用的

新特性

• 选择器
• 新样式
• 过渡
• transform
• animation
• 渐变
• 其他

选择器

新样式

• 边框

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

• boxshow 属性: 水平阴影（必须设置）、垂直阴影（必须设置）、模糊距离、阴影尺寸、阴影颜色、内外阴影

• 背景

  • background-clip
    • background-clip: border-box; 背景从border开始显示
    • background-clip: padding-box; 背景从padding开始显示
    • background-clip: content-box; 背景显content区域开始显示
    • background-clip: no-clip; 默认属性，等同于border-box
  • background-origin
    • background-origin: border-box; 从border开始计算background-position
    • background-origin: padding-box; 从padding开始计算background-position
    • background-origin: content-box; 从content开始计算background-position
  • background-size
    • background-size: contain; 缩小图片以适合元素（维持像素长宽比）
    • background-size: cover; 扩展元素以填补元素（维持像素长宽比）
    • background-size: 100px 100px; 缩小图片至指定的大小
    • background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
  • background-break
    • background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
    • background-break: bounding-box; 把盒之间的距离计算在内；
    • background-break: each-box; 为每个盒子单独重绘背景

• 文字

  • word-wrap
    • normal 正常
    • break-all 换行
  • text-overflow
    • clip 修剪文本
    • ellipsis 省略号
  • text-shadow
  • text-decoration
    • text-fill-color: 设置文字内部填充颜色
    • text-stroke-color: 设置文字边界填充颜色
    • text-stroke-width: 设置文字边界宽度

• 颜色 css3新增了新的颜色表示方式rgba与hsla

• rgba分为两部分，rgb为颜色值，a为透明度

• hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

transition过渡

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

transform

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

animation

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

渐变 linear-gradient

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

其他

flex grid等