css3知识总结

定义字体

定义字体@font-face{font-famil：自定义字体名称src=""}

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

@font-face {
                font-family:"maoti";
                src: url("fonts/maozedong.ttf");
            }
            .boc{
                font-family: "maoti"
            } */

阴影

text-shadow文本阴影：text-shadow：水平方向阴影 垂直阴影 模糊距离 阴影颜色

box-shadow盒子阴影：

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

2：阴影颜色：默认黑色

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

渐变background-image

1：线性渐变background: linear-gradient(angle,颜色  0%,颜色  50% ,颜色 100%)

①通过角度来确定渐变的方向。
后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。
可以用rgba产生渐隐效果
to right从左到右

2：重复线性渐变background: repeating-linear-gradient(angle,颜色  0%,颜色  50% ,颜色 100%)

3：径向渐变background: radial-gradient(shape size at position ,颜色  0%,颜色  50%, 颜色 100%)

①shape形状     ellipse：默认椭圆
                         circle：圆

②size大小

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

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

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

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
③position圆心位置   at x y
                                  x y取值
                                  英文单词left right top bottom center
                                  数值+单位
                                  百分比

4：重复径向渐变background: repeating-radial-gradient(shape size at position ,颜色  0%,颜色  50%, 颜色 100%)

圆角

border-radius：值四个一样
border-radius圆角 
值1 左上、右下 值2右上、左下
border-radius圆角 
值1左上 值2右下、左下 值3右下
border-radius圆角 
值1左上 值2右上 值3右下 值4左下

过渡

1：transition-property过渡属性

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

2：transition-duration过渡持续时间

①单位：m秒或ms毫秒

3：transition-timing-function速度

①1、ease：（逐渐变慢）默认值

②2、linear：（匀速）

③3、ease-in：(加速

④4、ease-out：（减速

⑤5、ease-in-out：（加速然后减速

⑥6、cubic-bezier(x1,y1,x2,y2)：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)

4：transition-delay过渡延迟时间