css3记事

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布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

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); /* 标准的语法 */
}

http://www.runoob.com/css3/css3-gradients.html

13.隐藏chrome滚动条

例：隐藏body的滚动条

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

14.旋转

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

transform:rotate(10deg)