zoukankan      html  css  js  c++  java
  • CSS3 总结-1

    新的边框属性

    属性描述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

    CSS3 字体描述符

    下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符:

    描述符描述
    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"。

    新的转换属性

    下面的表格列出了所有的转换属性:

    属性描述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 轴。

    转换属性

    下面的表格列出了所有的转换属性:

    属性描述CSS
    transform 向元素应用 2D 或 3D 转换。 3
    transform-origin 允许你改变被转换元素的位置。 3
    transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
    perspective 规定 3D 元素的透视效果。 3
    perspective-origin 规定 3D 元素的底部位置。 3
    backface-visibility 定义元素在不面对屏幕时是否可见。 3

    2D 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 转换元素的透视视图。
  • 相关阅读:
    总结Cnblogs支持的常用Markdown语法
    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python
    我的博客今天开通了,请多指教!
    技术分析:Femtocell家庭基站通信截获、伪造任意短信
    数据库防火墙如何防范SQL注入行为
    Pjax.js防刷新技术
    【写给新人】做开发几年的个人经历
    WebRTC之PeerConnection的建立过程
    基于Licode demo的屏幕共享功能的实现
    基于WebRTC的MCU开源项目Licode的环境搭建
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/5048350.html
Copyright © 2011-2022 走看看