首页 > 程序开发 > web前端 > HTML/CSS >

CSS3新功能总结-收集自W3C

2017-02-24

CSS3新功能总结-收集自W3C,CSS3 被划分为模块。 其中最重要的 CSS3 模块包括。

CSS3 被划分为模块。 其中最重要的 CSS3 模块包括:
  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D 转换
  • 动画
  • 多列布局
  • 用户界面
    边框
    属性 描述 CSS
    border-image 设置所有 border-image-* 属性的简写属性。 3
    border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
    box-shadow 向方框添加一个或多个阴影。 3

    背景
    属性 描述 CSS
    background-clip 规定背景的绘制区域。 3
    background-origin 规定背景图片的定位区域。 3
    background-size 规定背景图片的尺寸。 3

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

    字体
    描述符 描述
    font-family name 必需。规定字体的名称。
    src URL 必需。定义字体文件的 URL。
    font-stretch normal
    condensed
    ultra-condensed
    extra-condensed
    semi-condensed
    expanded
    semi-expanded
    extra-expanded
    ultra-expanded
    可选。定义如何拉伸字体。默认是 "normal"。
    font-style ormal
    italic
    oblique
    可选。定义字体的样式。默认是 "normal"。
    font-weight normal
    bold
    100
    200
    300
    400
    500
    600
    700
    800
    900
    可选。定义字体的粗细。默认是 "normal"。
    unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
    使用您需要的字体 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。 如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont): 实例
    2D转换 浏览器支持
    属性 浏览器支持
    transform
    Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9 需要前缀 -ms-。
    新的转换属性 下面的表格列出了所有的转换属性:
    属性 描述 CSS
    transform 向元素应用 2D 或 3D 转换。 3
    transform-origin 允许你改变被转换元素的位置。 3
    2D Transform 方法
    函数 描述
    matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
    translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
    translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
    translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
    scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
    scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
    scaleY(n) 定义 2D 缩放转换,改变元素的高度。
    rotate(angle) 定义 2D 旋转,在参数中规定角度。
    skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
    skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
    skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

    3D转换 浏览器支持
    属性 浏览器支持
    transform
    Internet Explorer 10 和 Firefox 支持 3D 转换。 Chrome 和 Safari 需要前缀 -webkit-。 Opera 仍然不支持 3D 转换(它只支持2D 转换)。
    转换属性 下面的表格列出了所有的转换属性:
    属性 描述 CSS
    transform 向元素应用 2D 或 3D 转换。 3
    transform-origin 允许你改变被转换元素的位置。 3
    transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
    perspective 规定 3D 元素的透视效果。 3
    perspective-origin 规定 3D 元素的底部位置。 3
    backface-visibility 定义元素在不面对屏幕时是否可见。 3
    3D Transform 方法
    函数 描述
    matrix3d(n,n,n,n,n,n,
    n,n,n,n,n,n,n,n,n,n)
    定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate3d(x,y,z) 定义 3D 转化。
    translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
    translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
    translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
    scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
    scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿 X 轴的 3D 旋转。
    rotateY(angle) 定义沿 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
    perspective(n) 定义 3D 转换元素的透视视图。

    过渡 浏览器支持
    属性 浏览器支持
    transition
    Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。 注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。
    它如何工作? CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内容:
  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长 实例 应用于宽度属性的过渡效果,时长为 2 秒: div{transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */} 注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。 效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时: 实例 规定当鼠标指针悬浮于
    元素上时: div:hover{width:300px;}
    多项改变 如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开: 实例 向宽度、高度和转换添加过渡效果: div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;} 亲自试一试 过渡属性 下面的表格列出了所有的转换属性:
    属性 描述 CSS
    transition 简写属性,用于在一个属性中设置四个过渡属性。 3
    transition-property 规定应用过渡的 CSS 属性的名称。 3
    transition-duration 定义过渡效果花费的时间。默认是 0。 3
    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
    transition-delay 规定过渡效果何时开始。默认是 0。 3

    CSS3动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 浏览器支持
    属性 浏览器支持
    @keyframes
    animation
    Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。 实例 @keyframes myfirst{from {background: red;}to {background: yellow;}}
    当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。 通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
  • 规定动画的名称
  • 规定动画的时长 实例 把 "myfirst" 动画捆绑到 div 元素,时长:5 秒: div{animation: myfirst 5s;-moz-animation: myfirst 5s; /* Firefox */-webkit-animation: myfirst 5s; /* Safari 和 Chrome */-o-animation: myfirst 5s; /* Opera */} 下面的表格列出了 @keyframes 规则和所有动画属性:
    属性 描述 CSS
    @keyframes 规定动画。 3
    animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
    animation-name 规定 @keyframes 动画的名称。 3
    animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
    animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
    animation-delay 规定动画何时开始。默认是 0。 3
    animation-iteration-count 规定动画被播放的次数。默认是 1。 3
    animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
    animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
    animation-fill-mode 规定对象动画时间之外的状态。 3
    下面的两个例子设置了所有动画属性: 实例 运行名为 myfirst 的动画,其中设置了所有动画属性: div{animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running; }

    CSS3多列 浏览器支持
    属性 浏览器支持
    column-count
    column-gap
    column-rule
    Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9 以及更早的版本不支持多列属性。
    新的多列属性 下面的表格列出了所有的转换属性:
    属性 描述 CSS
    column-count 规定元素应该被分隔的列数。 3
    column-fill 规定如何填充列。 3
    column-gap 规定列之间的间隔。 3
    column-rule 设置所有 column-rule-* 属性的简写属性。 3
    column-rule-color 规定列之间规则的颜色。 3
    column-rule-style 规定列之间规则的样式。 3
    column-rule-width 规定列之间规则的宽度。 3
    column-span 规定元素应该横跨的列数。 3
    column-width 规定列的宽度。 3
    columns 规定设置 column-width 和 column-count 的简写属性。 3


    CSS3 用户界面 浏览器支持
    属性 浏览器支持
    resize
    box-sizing
    outline-offset
    Firefox、Chrome 以及 Safari 支持 resize 属性。 Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。 所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
    CSS3 Resizing 在 CSS3,resize 属性规定是否可由用户调整元素尺寸。 这个 div 元素可由用户调整尺寸(在 Firefox 4+、Chrome 以及 Safari 中)。 CSS 代码如下: 实例 规定 div 元素可由用户调整大小: div{resize:both;overflow:auto;} 亲自试一试 CSS3 Box Sizing box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。 实例 规定两个并排的带边框方框: div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;} 亲自试一试 CSS3 Outline Offset outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 轮廓与边框有两点不同:
  • 轮廓不占用空间
  • 轮廓可能是非矩形 这个 div 在边框之外 15 像素处有一个轮廓。 CSS 代码如下: 实例 规定边框边缘之外 15 像素处的轮廓: div{border:2px solid black;outline:2px solid red;outline-offset:15px;} 亲自试一试 新的用户界面属性 下面的表格列出了所有的转换属性:
    属性 描述 CSS
    appearance 允许您将元素设置为标准用户界面元素的外观 3
    box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3
    icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3
    nav-down 规定在使用 arrow-down 导航键时向何处导航。 3
    nav-index 设置元素的 tab 键控制次序。 3
    nav-left 规定在使用 arrow-left 导航键时向何处导航。 3
    nav-right 规定在使用 arrow-right 导航键时向何处导航。 3
    nav-up 规定在使用 arrow-up 导航键时向何处导航。 3
    outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 3
    resize 规定是否可由用户对元素的尺寸进行调整。 3

相关文章
最新文章
热点推荐