CSS(全面系统讲解 工作应用--慕课)整理 四（css效果属性）

1、box-shadow 

     

           前两个表示偏移量，第三个值表示阴影的模糊区域有多大，阴影要扩展多少，加宽度，最后一个是颜色

           内阴影也是，偏移前两个，第三个是模糊，第四个是扩展长度，第五个是颜色，第六个是设置内阴影

         实例：   

                 

        作用：营造层次感（立体感）

                   充当没有宽度的边框 ，不会占据空间（当排版不允许加边框的时候），

                   特殊效果（无限投影，做图像）           

2、text-shadow

          立体感  ，第一个第二个是偏移方向，第三个是模糊

          印刷的品质感

           

3、border-radius

           圆角矩形

           圆形  border-radius:50%  就变成了一个圆

          半圆，扇形   

               就会变成扇形

          一些奇怪的角

              

4、background

          纹理，图案

          渐变

          雪碧图动画

   实现了以移动在上面就会切换的

          背景图尺寸适应

    用来控制背景图的位置，

repeat用来控制重复，background-size刚好指定大小，cover覆盖整个画面，同时长宽比没有变，

contain保持不变，完整的显示出来

5、clip-path:

       裁剪（对容器进行裁剪）

   

使用clip-path实现图片的放大缩小

       常见几何图形

       自定义路径

            实现了svg圆角，各个图形处理的问题

6、3D变换    

 网页是2d，2d变换，3d变换     transform

 1、

               3变成了斜切，rotate变成了旋转

 2、

透视属性透视距离设置为500px

  3d透视