css3知识点02—阴影+自定义字体+圆角+渐变+过渡

一、阴影

1、文本阴影 text-shadow

语法：text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离
color	可选，阴影的颜色

   /*
          text-shadow: h-shadow(必需，水平阴影的位置，允许负值 正值阴影在右)
          v-shadow（必需，垂直阴影的位置） blur（阴影模糊的距离，模糊半径） color;
          中间用，隔开，可以加多重阴影
     */
        .box {
            font-size: 50px;
            text-shadow: 10px 20px 4px yellow,
                12px 22px 5px green,
                14px 24px 4px pink;
            /* 多重阴影 */
        }

2、边框阴影 box-shadow

box-shadow 用于向方框添加阴影

语法：box-shadow:  X轴偏移量  Y轴偏移量   [阴影模糊半径]    [阴影扩展半径]   [阴影颜色]  [投影方式];

值	描述
x轴偏移量	必需，水平阴影的位置，允许负值。
y轴偏移量	必需，垂直阴影的位置，允许负值。
阴影模糊半径	可选，模糊距离
阴影扩展半径	可选，阴影尺寸
阴影颜色	可选，阴影的颜色。省略默认为黑色
投影方式	可选，设置inset时为内部阴影方式，省略默认为外阴影方式

  .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            box-shadow: 10px 10px 5px gray;
        }

效果：

二、自定义字体

1、定义字体

语法：

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

 /* 定义字体 */
        @font-face {
            font-family: "毛体";
            src: url("fonts/maozedong.ttf");
        }

2、使用字体

语法：

.box{
  font-family : 字体名称;
}

  /* 使用字体 */
        .box {
            font-family: "毛体";
            font-size: 50px;
        }

三、圆角

语法：border-radius

值	解释
border-radius:值；	四个角圆角一样
border-radius:值1   值2；	值1是左上角与右下角 值2是右上角与左下角
border-radius:值1   值2   值3；	值1是左上角 值2是右上角与左下角 值3是右下角
border-radius:值1   值2   值3   值4；	值1是左上角 值2是右上角 值3是右下角 值4是左下角

.box{
    width: 200px;
    height: 200px;
    background-color: pink;
    border-radius: 10px; /* 四个角的圆角值是一样的 */
    border-radius: 10px 30px;      /* 值一左上右下  值二右上左下  对角 */
    border-radius: 10px 25px 30px;   /* 值一左上 值二右上左下 值三右 下 */
    border-radius: 10px 25px 30px 50px;   /* 值一左上 值二右上 值三右下 值四左下  顺时针*/
    border-radius: 50%; /* 椭圆 */  
} 

四、渐变

1、线性渐变

（1）语法：

background-image : linear-gradient(方向 ， 颜色1    颜色1位置 ， ....)

（2）方向：

• 渐变角度：单位deg 例如：45deg
• to  英文单词  to right  从左向右渐变

（3）颜色位置：

• 可以是数值+单位
• 可以是 百分比

background-image: linear-gradient(45deg, red,pink);
 background: linear-gradient(red 0%,pink 50%); /*image也可以省略不写*/
 background-image: linear-gradient( to right, red 0px,pink 50px); /* 从左到右 */

2、重复线性渐变

background-image : repeating-linear-gradient()

background-image: repeating-linear-gradient(to bottom right, red,pink); /* 从左上到右下 */

3、径向渐变

语法:background-image : radial-gradient(形状  半径   圆心位置，颜色1    颜色1位置 , ...) 

background: radial-gradient(circle closest-corner at 40px 60px, #f00 0%,#00f 50%);

值：

（1）shap 形状

• ellipse  默认 椭圆形
• circle  圆形

（2）半径  size 渐变大小

• farthest-corner  默认 指定径向渐变的半径长度是从圆心到离圆心最远的角
• farthest-side  指定径向渐变的半径长度是从圆心到最离圆心远的边
• closest-corner  指定径向渐变的半径长度是从圆心到离圆心最近的角
• closest-side  指定径向渐变的半径长度是从圆心到离圆心最近的边

（3）position 圆心位置

• at  x位置  y位置
• x，y取值：数值+单位、百分比、英文单词left right center top bottom

4、重复径向渐变

语法：background-image : repeating-radial-gradient()

background: repeating-radial-gradient(circle closest-corner at top center, #f00 0%,#00f 50%);

五、过渡

1、过渡属性

语法：transition-property：；

值： 属性名 多个属性名之间有逗号隔开 或 all

transition-property: width, height; 
transition-property: all;

2、过渡持续时间

语法：transition-duration: ;

单位：秒s 或 毫秒ms

transition-duration:0.5s ;
transition-duration: 500ms;
/* 1秒=1000毫秒 */

3、过渡速度

语法：transition-timing-function: ;

值	详解
ease	默认 逐渐变慢
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速
cubic-bezier(x1,y1,x2,y2)	贝塞尔曲线

transition-timing-function: linear;

4、过渡延迟时间

语法：transition-delay

单位：秒s 或 毫秒ms

transition-delay: 1s;

5、缩写：

语法：transition :  transiton-propery值   transition-duration值   transition-timing-function值     transition-delay值;