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
定义过渡效果花费的时间,默认0transition-timing-function
规定过渡效果的时间曲线。默认easetransition-delay
规定过渡效果何时开始。默认0
动画属性
@keyframes
规定动画animation
所有动画属性的简写属性animation-name
规定@keyframes动画的名称animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认0animation-timing-function
规定动画的速度曲线。默认easeanimation-delay
规定动画何时开始。默认0animation-iteration-count
规定动画被播放的次数。默认1animation-direction
规定动画是否在下一周期逆向的播放,默认normalanimation-play-state
规定动画是否正在运行或暂停。默认runninganimation-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
规定是否可由用户对元素的尺寸进行调整