css3知识点

一、定义字体：

        定义字体
        @font-face{
              font-family:自定义字体名称;
              src: url(字体路径);
        }

        使用字体
        选择器{
                  font-family：自定义字体名称;
        }

二、阴影：

        1、文本阴影text-shadow

                text-shadow: 水平方向阴影 垂直方向阴影 模糊距离 阴影颜色;

        2、边框阴影box-shadow

                box-shadow: 水平方向阴影 垂直方向阴影 模糊距离 阴影扩展半径 阴影颜色 投影方式;

                阴影颜色：默认为黑色

                投影方式：默认外投影 若设置为inset 则为内投影

三、圆角：

                border-radius：值1;  四个圆角一样

                border-radius：值1   值2; 值1是左上角、右下角 值2是右上角、左下角

                border-radius：值1  值2  值3; 值1是左上角  值2是右上角、左下角  值3右下角

                border-radius：值1，值2，值3，值4;  值1是左上角  值2是右上角  值3是右下角

                                                值4是左下角

四、渐变background-image：

        1、线性渐变：

                线性渐变 background-image: linear-gradien（渐变角度, 颜色1  颜色1位置, 颜色2  颜色2位置......）

                重复线性渐变 background-image: repeating-linear-gradient (渐变角度, 颜色1  颜色1位置, 颜色2  颜色2位置......）

                 渐变角度：1.单位deg  2.可以用单词表示渐变方向   3.to right从左向右线性渐变

        2、径向渐变：

                径向渐变 background-image: radial-gradient (shape  size   at position, 颜色1 颜色位置, 颜色2 颜色2位置, ......)

                重复径向渐变 background-image: repeating-radial-gradient (shape  size   at position, 颜色1 颜色位置, 颜色2 颜色2位置, ......)

                shape渐变形状：ellipse默认椭圆  circle 圆形

                size渐变大小  

                closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）

                closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）

                farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）

                farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

                position圆心位置    at  x  y

                x y取值

                1.英文单词left  right  center  top  bottom

                2.数值+单位

                3.百分比

五、过渡：

        1、transition 过渡属性

                多个属性名用逗号隔开或用all表示

        2、transition-duration 过渡持续时间单位s秒或ms毫秒

        3、transition-timing-function过渡速度

                ease 默认逐渐变慢
                linear匀速
                ease-in加速
                ease-out减速
                ease-in-out先加速后减速
                cubic-bezier(x1,y1,x2,y2)

        4、transition-delay 过渡延迟时间

        5、缩写

                transition: transiton-propery值   transition-duration值   transition-timing-function值     transition-delay值;