css3学习笔记

一些重要的css3模块：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画

css3边框

    border-radius：10px;   //设置圆角边框,如果只指定一个值，那么将生成4个圆角；指定4个值：左上角，右上角，右下角，左下角；指定三个值：左上角，右上角和左下角，右下角；指定两个值：左上角和右下角，右上角和左下角
    box-shadow: 10px 10px 5px #888888;  //设置边框阴影：水平阴影的位置，垂直阴影的位置，模糊距离，阴影的大小，阴影的颜色，从外层的阴影改变阴影内侧阴影
    border-image

背景

    background-image:url position position repeat,url position position repeat;
    //position代表right，bottom，left，top四个中的一个，可以通过background-position: position position来设置；repeat代表no-repeat,repeat两个中的一个，可以通过background-repeat:repeat来设置。
    
    background-size: 80px 60px;
    //可以指定像素或百分比大小，指定的大小相对于父元素的宽度和高度的百分比的大小。
    
    background-origin: border-box | padding-box | content-box;
    //指定了背景图像的位置区域
    
    background-clip: border-box | padding-box | content-box;
    //背景裁剪属性是从指定位置开始绘制

渐变

    //线性渐变：linear-gradient:向下/向上/向左/向右/对角方向
    //径向渐变：radial-gradient:由他们的中心定义
    
    //线性渐变默认是从上到下
    background-image:linear-gradient(direction, color-stop1, color-stop2,...);
    //从左到右direction：to right；对角direction: to bottom right;
    //使用角度：linear-gradient(angle, color-stop1, color-stop2,...);

文本效果

    text-shadow和box-shadow类似
    text-overflow: clip(截取） | ellipsis （移除部分省略号）
    word-wrap: break-word; //强制换行
    word-break: keep-all | break-all,单词拆分换行

字体

    <style> 
        @font-face { 
            font-family: myFirstFont; 
            src: url(sansation_light.woff); 
        } 
        div { 
            font-family:myFirstFont; 
        } 
    </style>

2D转换

    //2D变换方法：
    //translate()方法，根据X和Y位置给定的参数，从当前元素位置移动
    transfrom: translate(50px, 100px);
    
    //rotate()方法，在一个给定度数顺时针旋转的元素
    transform: rotate(30deg);
    
    //scale()方法，该元素增加或减少的大小，取决于宽度X和高度Y的参数
    transform: scale(2,3);
    
    //skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度
    transform:skew(30deg,20deg);
    
    //matrix()有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3D转换

    translate3d(x,y,z);
    translateX(x);
    translateY(y);
    translateZ(z);
    
    scale3d(x,y,z);
    scaleX(x);
    scaleY(y);
    scaleZ(z);
    
    rotate3d(x,y,z,angle);
    rotateX(angle);
    rotateY(angle);
    rotateZ(angle);

过渡

transition: property(规定应用过渡的css属性的名称） duration（定义过渡效果花费的时间，默认是0）

动画

    //@keyframes
    
    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
        //from to等同于0%和100%
    }
    
    //也可以用半分比
    @keyframes myfirst
    {
        0% {background: red;}
        25% {background: yellow;}
        50% {background: blue;}
        100% {background: green;}
    }
    
    div{
        animation: myfirst 5s;
        //使用animation定义在具体的元素上
    }

用户界面

    box-sizing: border-box;
    //高度和宽度应用于元素的所有的部分：内容、内边距和边框
    box-sizing: conetent-box;
    //高度和宽度只应用于元素的内容

弹性盒子

    //弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。
    
    flex-direction: row(横向从左到右排列) | row-reverse(反转横向排列) | column(纵向排列) | column-reverse(反转纵向排列)
    
    justify-content: flex-start | flex-end | center | space-between | space-around
    
    align-items: flex-start | flex-end | center | baseline | stretch
    
    flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
    
    align-content: flex-start | flex-end | center | space-between | space-around | stretch
    
    flex

多媒体查询

    @media screen and (min-width: 320px) {
    }