1.文字超出省略

text-overflow: ellipsis

white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;

 *父元素font-size:0 会影响到省略符号的显示

 

2.模糊背景图and IOS背景模糊

filter

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

可以配合父元素透明度背景色rgba

 

 

ios背景模糊 

backdrop-filter: blur(10px)

 

 

3.stick footer布局

 

 

4.transition效果过度交互

 transition: all 0.6s

通过改变class值来展示

 

5.flex布局

 

6.scale缩放

图片0.6秒内放大1.4倍

img{
        transition: all 0.6s;  }  img:hover{
          transform: scale(1.4);  }

 

 

7.背景图固定

background-attachment: fixed;

 

8.a标签添加下划线

a{
        text-decoration:underline;}

 

9.字体引用

@font-face{
   font-family: myFirstFont;src: url('Sansation_Light.ttf'),     url('Sansation_Light.eot'); /* IE9+ */}div{
   font-family:myFirstFont;}

 

10.@media 查询

分辨率小于300px时body背景色为蓝色，分辨率为301~2000px时body背景色为红色

@media screen and (max-width: 300px) {
       body {        background-color:blue;    }}@media (min-width: 301px) and (max-width: 2000px){
       body{            background-color:red;    }}

 

11.textarea不可拖动

resize: none;

 

12.背景色渐变

带有指定角度的线性渐变

#grad {
     background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(180deg, red, blue); /* 标准的语法 */}

 

13.隐藏chrome滚动条

例：隐藏body的滚动条

body::-webkit-scrollbar {
       display:none;}

 

14.旋转

例：旋转10度。可以使用负数

transform:rotate(10deg)