css3知识点总结

一、阴影

        1.文本阴影:text-shadow 

                属性为文本添加阴影，在文本中添加一个或多个阴影。

            text-shadow: -2px 5px 3px skyblue, 0px 30px 92px rgba(228, 49, 49, 1),0px 46px 134.83px rgba(214, 144, 144, 1);
            /* text-shadow:; */
            /* 值分别为水平方向 垂直方向 模糊半径 阴影颜色 */
            /* 阴影效果可以多重叠加 中间用逗号隔开 */
   

tips: 阴影效果可以多重叠加,叠加时中间用逗号隔开 

        2.边框阴影：box-shadow

        属性应用阴影于元素，向一个元素添加一个或多个阴影。

/* 值分别为 x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] */
            box-shadow: 10px 10px 5px 10px lightblue inset;

二、圆角 border-radius

        1. border-radius

        属性定义元素角的半径 ，通过该属性，可以实现任何元素的“圆角”样式。

        2.简写形式      

        属性可以接受一到四个值。规则如下：

        四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）

        三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）

        两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）

        一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）

/* 四个角的圆角都一样 */
border-radius: 10px; 
/* 值1：左上和右下 值2：右上和左下 */
border-radius: 10px 50px;
/* 值1：左上 值2：右上和左下 值3：右下角 */
border-radius: 10px 20px 50px;
 /* 值1：左上 值2：右上 值3：右下 值4：左下角 */
border-radius: 10px 50px 30px 20px;
           

三、自定义字体

        1.基本形式

        （1）定义字体

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

        （2）使用字体

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

2.上机实例

/* 外部字体 */
/* 定义字体 */
        @font-face {
            font-family:zhengui;
            src: url("fonts/PangMenZhengDaoZhenGuiKaiTi-2.ttf");
        }
/* 使用字体 */
.box2{
            width: 200px;
            margin: 0 auto;
            font-family: zhengui;
            

3.运行效果 

 

四、渐变

        1.线性渐变

        显示两种或多种指定颜色之间的平滑过渡。

   .box2{
            /* 线性渐变 */


            background-image:linear-gradient(45deg);  
            /* 45度角渐变 */

            background-image:linear-gradient(45deg,lightblue,pink);
            /* 45度角粉蓝渐变 */

            background-image: linear-gradient(to bottom right,lightblue,pink);  
            /* 从左上到右下渐变 */
            /* repeating 重复线性渐变 */

        }

2.径向渐变

 .box3{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            /* 径向渐变 */
            background-image:radial-gradient(circle farthest-side at 10px 20px,gold,skyblue);
            background-color: lightblue;

        }

 3.运行效果

五、过渡

1.基本形式

         transition:过渡属性 过度持续时间 过渡速度 过渡延迟时间;

2.属性

（1）transition-property 过渡属性

（2）transition-duration 过渡持续时间

（3）transition-timing-function  过渡速度

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

（4）transition-delay 过渡延迟时间

3.上机实例

        .box5{
            width: 100px;
            height: 100px;
            background-image:radial-gradient(circle farthest-side at 10px 20px,pink,skyblue);
            transition:all 0.5s linear 0.3s;
            /* transition-property 过渡属性 若同时过渡多个属性 用逗号隔开 所有属性都需要过渡的时候，用all代替 */
            /* transition-duration  如果属性之间持续时间不同 用逗号隔开持续时间 */
            /* transition-timing-function 过渡速度 默认为ease 逐渐慢下来 */
            /* 默认 逐渐变慢 */
            transition-timing-function: ease; 
            /* 匀速 */
            transition-timing-function: linear;
            /* 加速 */
            transition-timing-function: ease-in;
            /* 减速 */
            transition-timing-function: ease-out;
            /* 先加速再减速 */
            transition-timing-function: ease-in-out;
        }

六、面试题

优雅降级和渐进增强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。