CSS3知识点整理及属性整理

CSS3基础

简介

• css3被划分为模块
  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

边框

• 浏览器支持

  属性	浏览器支持
  border-radius	IE9+、Firefox、chrome、safari、opera
  box-shadow	IE9+、Firefox、chrome、safari、opera
  border-image	Firefox、chrome、safari

对于border-image，safari5 以及更老的版本需要前缀-webkit-。
opera 支持border-radius和box-shadow属性，但对于border-image需要前缀-o-

背景

• 浏览器支持

  • 属性	浏览器支持
    background-size	IE9+、Firefox、chrome、safari、opera
    background-origin	IE9+、Firefox、chrome、safari、opera

老版本的Firefox，background-size加前缀-moz-
safari，background-origin加前缀-webkit-

文本效果

• 浏览器支持

  • 属性	浏览器支持
    text-shadow	IE9+、Firefox、chrome、safari、opera
    word-wrap	IE9+、Firefox、chrome、safari、opera

IE9+及更早版本不支持text-shadow属性

字体

• @font-face规则
  • 浏览器支持

    属性	浏览器支持
    @font-face	IE9+、Firefox、chrome、safari、opera

IE8及更早版本不支持

2D转换

• 浏览器支持

  • 属性	浏览器支持
    transform	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)

• 转换方法
  • translate() 移动
  • rotate() 旋转
  • scale() 缩放
  • skew() 翻转
  • matrix() 方法组合在一起，六个参数

3D转换

• 浏览器支持

  • 属性	浏览器支持
    transform	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)

• 方法
  • rotateX() 绕X轴旋转
  • rotateY() 绕Y轴旋转

过度

• 浏览器支持

  • 属性	浏览器支持
    transition	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)

IE9及以前不支持transition

• 元素从一种样式逐渐改变为另一种的效果
• 规定两项内容
  • 规定把效果加在哪个css属性上
  • 规定效果的时长

动画 @keyframe规则

• 浏览器支持

  • 属性	浏览器支持
    @keyframes	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)
    animation	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)

IE9不支持此属性

• 必须将定义的动画绑定到某元素
  -至少定义以下两项动画属性
  • 动画名称
  • 动画时长
• 忽略时长，动画不起效果

多列

• 浏览器支持

  • 属性	浏览器支持
    column-count	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)
    column-gap	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)
    column-rule	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)

    IE9及以前版本不支持

• 属性
  • column-count 列数
  • column-gap 列间间隔
  • column-rule 列之间的宽度、样式、颜色规则

用户界面

• 属性
  • resize 规定是否可以由用户调整元素尺寸
  • box-sizing 以确切的方式定义适应某个区域的具体内容
  • outline-offset 对轮廓进行偏移
• 浏览器支持

  • 属性	浏览器支持
    resize	Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)
    box-sizing	IE9+(-ms-)、Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、、opera(-o-)
    column-rule	Firefox(-moz-)、chrome(-webkit-)、safari(-webkit-)、opera(-o-)

    IE9及以前版本不支持

属性整理

边框属性

• border-radius 设置圆角属性简写
• border-image 设置边框图片属性简写
• box-shadow 方框添加阴影

背景

• background-clip 规定背景绘制区域
• background-origin 规定背景图片的定位区域
• background-size 规定背景图片的尺寸

文本属性

• hanging-punctuation 规定标点字符是否位于线框之外
• punctuation-trim 规定是否对标点字符进行修剪
• text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
• text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
• text-justify 规定在text-align设置为"justify"时所使用的对齐方法
• text-outline 规定文本的轮廓
• text-overflow 规定文本溢出包含元素时发生的事情
• text-shadow 向文本添加阴影
• text-wrap 规定文本的换行规则
• word-break 规定非中日韩文本的换行规则
• word-wrap 规定对长的不可分割的单词进行分割并换行到下一行

字体

描述符	值	描述
font-family	name	必须。规定字体名称
src	URL	必须。定义字体文件URL
font-stretch	normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-condensed/ultra-condensed	可选。定义如何拉伸字体。默认是"normal"
font-style	ormal/italic/oblique	可选。定义字体的样式，默认未“normal”
font-weight	normal/bold/100~900	可选。自定字体的粗细。默认“normal”
unicode-range	unicode-range	可选。定义字体支持的UNICODE字符范围。默认“U+010FFFF”

2D转换

• transform 向元素应用2D或3D转换
• transform-origin 允许你改变转换元素的位置
• 2D转换方法
  • matrix(x,x,x,x,x,x) 六个参数，方法综合
  • translate(x,y) 沿X|Y轴移动元素
  • translateX(n) 沿X轴移动元素
  • translateY(n) 沿Y周移动元素
  • scale(x,y) 缩放，改变元素宽度高度
  • scaleX(n) 缩放，改变宽度
  • scaleY(n) 缩放，改变高度
  • rotate(angle) 旋转，规定角度
  • skew(x-angle，y-angle) 倾斜，X|y轴
  • skewX(angle) 倾斜 X轴
  • skewY(angle) 倾斜 Y轴

3D转换

• transform 向元素应用2D或3D转换
• transform-origin 允许改变被转换元素的位置
• transform-style 规定被嵌套元素如何在3D空间中显示
• perspective 规定3D元素的透视效果
• perspective-origin 规定3D元素的底部位置
• backface-visibility 定义元素在不面对屏幕是是否可见
• 3D转换方法
  • matrix3d(x...x) 16个参数，方法综合
  • translate3d(x,y,z) 转化
  • translateX(n) 沿X轴移动元素
  • translateY(n) 沿Y周移动元素
  • translateZ(n) 沿Z周移动元素
  • scale3d(x,y,z) 缩放
  • scaleX(n) 缩放
  • scaleY(n) 缩放
  • scaleZ(n) 缩放
  • rotate3d(x,y,z,angle) 旋转
  • rotateX(angle) 旋转
  • rotateY(angle) 旋转
  • rotateZ(angle) 旋转
  • perspective(n) 转换元素的透视试图

过度属性

• transition 简写属性
• transition-property 规定应用过渡的CSS属性的名称
• transition-duration 定义过渡效果花费的时间，默认0
• transition-timing-function 规定过渡效果的时间曲线。默认ease
• transition-delay 规定过渡效果何时开始。默认0

动画属性

• @keyframes 规定动画
• animation 所有动画属性的简写属性
• animation-name 规定@keyframes动画的名称
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认0
• animation-timing-function 规定动画的速度曲线。默认ease
• animation-delay 规定动画何时开始。默认0
• animation-iteration-count 规定动画被播放的次数。默认1
• animation-direction 规定动画是否在下一周期逆向的播放，默认normal
• animation-play-state 规定动画是否正在运行或暂停。默认running
• animation-fill-mode 规定对象动画时间之外的状态

多列

• column-count 规定元素应被分割的列数
• column-fill 规定如何填充列
• column-gap 规定列之间的间隔
• column-rule 设置所有column-rule-*简写属性
• column-rule-color 规定列之间规则的颜色
• column-rule-style 规定列之间规则的样式
• column-rule-width 规定列之间规则的狂赌
• column-span 规定元素应该跨越的列数
• column-width 规定列的宽度
• columns 规定设置column-width和column-span的简写属性

用户界面

• appearance 允许将元素设置为标准用户界面元素的外观
• box-sizing 允许以确切的方式定义适合某个区域的具体内容
• icon 为创作者提供使用图标化等价物来设置元素样式的能力
• nav-down 规定在使用arrow-down导航键时向何处导航
• nav-index 设置元素的tab键控制次序
• nav-left 规定在使用arrow-left导航键时向何处导航
• nav-right 规定在使用arrow-right导航键时向何处导航
• nav-up 规定在使用arrow-up导航键时向何处导航
• outline-offset 对轮廓进行偏移，并且超出边框边缘的位置绘制轮廓
• resize 规定是否可由用户对元素的尺寸进行调整