字体位置

 text-align: left;  center;  right;   /* (left)默认左,(center)居中,(right)默认右*/

 line-height: 77px;     /*行高等于盒子的高度 就变成文字居中*/
 letter-spacing: 10px;  /*字与字中间的距离*/
 word-spacing: 10px;    /*一句英文单词之间的距离(就是一句话与一句话的距离)*/
 text-indent: 100px;     /*文字向后退100px*/
 text-decoration: line-through;  /*文字上面加一条直线*/

 font-style: italic;  normal;  /*(italic)斜字, (normal 正常);*/
 font-weight:lighter; normal; bolder;    /* (lighter)字体细一点,(normal)字体正常,(bolder)字体加粗一点*/

 

鼠标样式

cursor: pointer; /* 手*/
cursor: default; /* 指针*/
cursor: move; /* 可移动的样式*/
cursor: help; /* 帮助信息*/

 

超出隐藏变成...

overflow: hidden;
/*必须结合的属性,当内容溢出元素框时发生的事情*/
text-overflow: ellipsis;
/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
display: -webkit-box;
/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
-webkit-line-clamp: 4;
/*用来限制在一个块元素显示的文本的行数。*/
-webkit-box-orient: vertical;
/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
word-break: break-all;

 

背景图片

background-image: url();    /*url( 图片地址 )*/
    background-repeat:  no-repeat;  /* 图片不铺平*/
                        repeat-x;   /* 图片一行铺平*/
                        repeat-y;   /* 图片向下铺平*/
    /* 背景图位置 */
    /* 第一中写法 */
    background-position: left;  /* 照片向左中间居中*/
                         right; /* 照片向右中间居中*/
                         top;   /* 照片向上中间居中*/
                         bottom;/* 照片向下中间居中*/
                         center;/* 照片向背景中间居中*/
    /* 第二中写法 */
    background-position:30px  100px; /* 距离左边30px  距离上面100px*/

    background-attachment: fixed;   /* 照片固定在一个点,滑动的时候照片不动*/
                           scroll;  /*照片跟着一起滑动*/
    /* 背景图大小 */
    background-size:20px 20px;   /*照片大小*/

 

边框

border:1px solid red;   /* 1px边框大小 solid边框直线 red边框颜色 */
               solid    /*实线*/
               dotted   /*点线*/
               dashed   /*虚线*/
               double   /*双线*/
border-color: transparent;(透明)

 

边距

/* 内边距 */
padding: 10px 40px 50px 60px; /*上 右 下 左  四个方向*/

padding-left: 10px; /*左边距*/
padding-right: 10px; /*右边距**/
padding-top: 10px; /*上边距**/
padding-bottom: 10px; /*下边距**/

/* 外边距 */
margin: 10px 40px 50px 60px; /*上 右 下 左  四个方向*/

margin-left: 10px; /*左边距*/
margin-right: 10px; /*右边距**/
margin-top: 10px; /*上边距**/
margin-bottom: 10px; /*下边距**/

 

圆角与阴影

/* 圆角 */
border-radius: 50%; /*圆形   ps:长方形不能变成圆形*/

/* 阴影 */
box-shadow: 0 4px 10px rgb; /*阴影*/

/* 文字阴影 */
text-shadow: 10px 10px 10px #000000; /* 第一个是右边的距离,第二个上下的距离  第三个是阴影的清晰度  最后一个颜色 */
text-shadow: -10px -10px 10px #000, 10px 10px 10px #000; /* 第一个是右边的距离,第二个上下的距离  第三个是阴影的清晰度  最后一个颜色 (写多个的样式)*/

/* 浮雕文字 */
text-shadow: -2px -2px 2px rgb(0, 0, 0), 2px 2px 2px rgb(255, 255, 255);

 

css3

css3 选择器

/* 个人比较常用的 */

/* before 在标签文字前面加的东西 */
div::before {
  content: '---';
}

/*:after标签文字后面加的东西*/
div::after {
  content: '========';
}

li:nth-child(1) {
} /*li:nth-child(1)表示第一个被选择上*/


/*倍数写法*/
li:nth-child(3n){background:orange;}
/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/




/*倍数分组匹配*/

li:nth-child(3n+1){background:orange;}
/* 匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}
/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}
/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/




/*奇偶匹配*/
li:nth-child(even){background-color: #000; }  //（偶数行）

li:nth-child(odd){background-color: #ccc;} //（奇数行）

 

 

css3 动画

 /* 动画兼容
        Trident内核：前缀为-ms
        Gecko内核：前缀为-moz
        Presto内核：前缀为-o
        Webkit内核：前缀为-webkit
        -moz代表firefox浏览器私有属性
        -ms代表IE浏览器私有属性
        -webkit代表chrome、safari私有属性
     */

    animation:  move 2s ease 1s infinite alternate both;
    /*move名字 2s动画时间  ease移动的状态  1s动画延时  infinite重复次数  alternate(是否跳回起点从新开始)  both动画执行完后的状态;*/

    animation-name: move;               /*自定义名字    */
    animation-duration: 5s;             /*动画持续时间  */
    animation-timing-function: ease ;   /*动画是怎么移动*/
    animation-delay: 1s;                /*动画延迟,只有第一次 (就是第一次开始移动的时候延时多久开始执行)*/
    animation-iteration-count: 2;       /*重复次数   infinite(无限次重复)    ps:填写数字就是执行几次  */

    animation-direction: alternate;     /* 动画是否重置在播放  */
                         alternate;     /* 动画直接从上一次停止的位置开始执行，倒着来*/
                         normal;        /* 动画第二次直接跳到0%的状态开始执行(跳回起点从新开始)*/

     animation-fill-mode: both;         /*动画执行完后的状态*/
                          forwards      /* 当动画完成后次数之后 就在执行完的位置上(结束时状态上)*/
                          backwards     /*在 animation-delay 所指定的一段时间内，(就动画执行完后跳回起始位置(开始位置))*/
                          both          /*设置对象状态为动画结束或开始的状态，结束时状态优先 (结束时状态上)*/
    /*  form起点  to 终点 */
    @keyframes move{
        form{
            起始位置
        }
        to{
            终点位置
        }
    }
     /*  form起点  to 终点 */
    @keyframes move{
        0%{
            起始位置
        }
        100%{
            终点位置
        }
    }

    /* 执行过程 */
        transform:  none;    /*不进行转换。*/
                    skew(20deg,0deg);/*  skew(x,y)定义沿着 X 和 Y 轴的 2D 倾斜转换。skew(x,y)   x左右斜方向   y上下斜方向 */

    /* 原地 */
        transform:  rotateX(180deg);     /*上下反转180deg */
                    rotateY(180deg);     /*左右反转180deg */
                    rotateZ(180deg);     /*平面转动180deg*/

    /* 移动 */
        transform:  translateZ(100px);   /*正值向前移动 ,  负值向后移动*/
                    translateY(100px);   /*正值向右移动 ,  负数向左移动*/
                    translateX(100px);   /*正值向下移动 ,  负数向上移动*/

    /* 放大与缩小 */
        transform:  scale(2,1); /*可以对元素进行宽高变大倍数，第一个值是宽，第二个值是高度 ,不可为负值；*/