CSS 3

目录

一、阴影

1、文本阴影 text-shadow

 2、边框阴影 box-shadow

 二、自定义字体

 1、定义字体

2、使用字体

三、圆角

 四、渐变

 1、线性渐变

2、重复线性渐变

3、径向渐变

4、重复径向渐变

​

五、过渡

1、过渡属性

 2、过渡持续时间

3、过渡速度

 4、过渡延迟时间

5、缩写：

---

一、阴影

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 5px yellow,
                15px 30px 5px green,
                20px 40px 5px pink;
            /* 多重阴影 */
        }

 2、边框阴影 box-shadow

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

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

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

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

 二、自定义字体

 1、定义字体

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

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

2、使用字体

属性值：.box{
                          font-family : 自定义字体名称;
                }

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

三、圆角

属性值：border-radius 

.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值;