CSS3小知识

人生是洁白的画纸，我们每个人就是手握各色笔的画师；人生也是一条看不到尽头的长路，我们每个人则是人生道路的远足者；人生还像是一块神奇的土地，我们每个人则是手握农具的耕耘者；但人生更像一本难懂的书，我们每个人则是孜孜不倦的读书郎。

lore.jpg

一、 圆角：border-radius

    border-radius:  px  %   em  rem;
    border-radius: 左上 右上 右下 左下;
    border-radius: 左上 右下 右上 左下;
    border-radius: 左上 右上 左下 右下;
    border-radius: 左上 右上 右下 左下;

二、浏览器前缀

    -webkit-                    Chrome/Safari/opear/firefox(49+)
    -moz-                       Firefox
    -ms-                        IE
    -o-                         Opear(old)
    不加前缀                     W3C要求
 eg:
    -webkit-border-radius       WebkitBorderRadius
    -moz-border-radius          MozBorderRadius
    -ms-border-radius           msBorderRadius
    -o-border-radius            OBorderRadius
    border-radius               borderRadius

三、阴影

    （1）盒子阴影
    box-shadow: x偏移 y偏移 阴影范围 color;
    box-shadow: [inset] x偏移 y偏移 阴影范围 color;(内阴影)
    box-shadow: [inset] x偏移 y偏移 阴影范围 [扩展] color;
    阴影可以叠加:
        box-shadow: x y opacity color, x y opacity color...;    
    （2）文字阴影
    text-shadow: x偏移 y偏移 阴影范围 color;
    text-shadow: x y opacity color, x y opacity color...;

四、运动

transition: duration style-type easing;

五、变形

transform
    translate(x,y)          平移(x、y轴)
    rotate(deg)             旋转(z轴)
    scale(x倍数,y倍数)       缩放
    skew(xdeg,ydeg)         拉伸(扭曲)

六、设置原心位置

transform-origin: 横向 纵向;

七、渐变

（1）线性渐变
    linear-gradient(color1, color2);
    linear-gradient(color1, color2, color3...);
    改变方向
    linear-gradient(方向, color1, color2, color3...);
    范围渐变
    linear-gradient(color1 start, color1 end, color2 start, color2 end, ...);
    跳变
    repeating-linear-gradient(color1 start, color1 end, color2 start, color2 end...);
（2）径向渐变
    radial[reɪdiəl]-gradient(color1, color2);

八、背景

    background-size

九、文本切片

    1.给元素设置渐变背景
    2.设置文本切片
        -webkit-background-clip: text;
    3.文字透明