效果属性

　　box-shadow/text-shadow/border-radius/background/clip-path

box-shadow

图形阴影

View Code

内阴影 

View Code

制作无宽度的border

View Code

 复制元素

View Code

作用

　　营造层次感

　　充当没有宽度的边框

 　　复制元素可以实现一个div制作特殊效果

text-shadow

　　作用 文字立体感

border-radius

　　圆角矩形

　　圆角

　　半圈/扇形

　　一个奇怪的角

圆角矩形/圆角

View Code

View Code

 一些奇怪的东西

View Code

 background

　　纹理、图案

　　渐变

　　　　linear-gradient

　　　　radial-gradient

　　雪碧图动画

　　　　background-position

　　背景图尺寸适应

　　　　background-size:cover/contain

 纹理

View Code

 纹理2

View Code

 雪碧图动画

View Code

 clip-path

 　　对容器进行裁剪

　　常见的几何图形

　　自定义路径

View Code

3D变换

　　transform

　　　　translate/scale/skew/rotate

　　transform-style: preserve-3d  3D旋转效果

　　perspective 元素获得透视效果， 3D立体感

　　perspective-origin  观察视角

      
  
       
            preserve-3d/perspective  
       
  
       
            学习3D变换  
       
      

View Code

3D轮播

View Code