CSS 3教程

Posted 2020-06-30

1、各浏览器适用前缀
        -webkit-        谷歌或苹果        -o-        欧朋
        -moz-        火狐                -ms-        IE9
2、边框（border）
    属性：border-image 设置所有 border-image-* 属性的简写属性
         border-radius 设置所有四个 border-*-radius 属性的简写属性（圆角）
         box-shadow 向方框添加一个或多个阴影：
                格式：10px 20px 15px color（水平、垂直、模糊度、颜色）
         对角线设置值，顺序：左上、右下、右上、左下
         border-image边框图片
 3、背景（background）
    属性：background-clip 规定背景的绘制区域
         background-origin 规定背景图片的定位区域
         background-size 规定背景图片的尺寸 
4、文本（text）
    属性：hanging-punctuation 规定标点字符是否位于线框之外
        punctuation-trim 规定是否对标点字符进行修剪。
        text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
        text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
        text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法
        text-outline 规定文本的轮廓
        text-overflow 规定当文本溢出包含元素时发生的事情
        text-shadow 向文本添加阴影（与边框阴影相似）
        text-wrap 规定文本的换行规则，也可用overflow
        word-break 规定非中日韩文本的换行规则
        word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 
5、2D转换
    属性：transform 向元素应用 2D 或 3D 转换 
         transform-origin 允许你改变被转换元素的位置 
        未加前缀的默认支持IE 6、7、8
        例：transform:translate(50px,100px)沿着x轴移动50px，沿着y轴移动100px距离
            transform:scale(x,y)改变元素宽度和高度
            transform:rotate(ndeg)倾斜度数
            transform:matrix（接六个属性的值）
6、3D转换
    属性：transform 向元素应用 2D 或 3D 转换
        transform-origin 允许你改变被转换元素的位置
        transform-style 规定被嵌套元素如何在 3D 空间中显示
        perspective 规定 3D 元素的透视效果
        perspective-origin 规定 3D 元素的底部位置
        backface-visibility 定义元素在不面对屏幕时是否可见 
7、过渡
    属性：transition 简写属性，用于在一个属性中设置四个过渡属性 
        transition-property 规定应用过渡的 CSS 属性的名称
        transition-duration 定义过渡效果花费的时间。默认是0
        transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
        transition-delay 规定过渡效果何时开始。默认是0
8、动画
    属性：@keyframes 规定动画。
        animation 所有动画属性的简写属性，除了 animation-play-state 属性
        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 规定对象动画时间之外的状态 
    格式：animation 名称  时间
        @keyframes  名称     属性