CSS全面解析之三：CSS 效果

1. box-shadow

语法
box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.5);
解析：
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

2. 补充一个可能遇到的小知识点：如果阴影不想被其他兄弟 div 遮挡住，可以通过 z-index 来控制遮挡顺序。但是 z-index 仅对 position= relative | absolute 生效哟。

   
   
   

   效果图

3. 一个有趣点，一个 div 画图系列其实就是用 box-shadow 来实现的。

   
   
   

   效果图，仅仅使用一个 div 元素来实现

4. 总结 box-shadow 作用

• 营造层次感（立体感）
• 充当没有宽度的边框
• 特殊效果

5. 总结 text-shadow 作用

• 立体感
• 印刷品质感

6. 总结 border-radius 作用

• 圆角矩形
• 圆形 （border-radius:50%）
• 半圆、扇形
• 一些奇怪的角角

7. 总结 background 作用

• 纹理、图案
• 渐变
• 雪碧图动画
• 背景图尺寸适应

8. 总结clip-path 作用

• 对容器进行裁剪
• 常见几何图形遮罩效果

• 支持自定义路径

  
  
  

  裁剪效果

9. 变换 transform 几种基本的变换

• translate 移动
• scale 缩放
• skew 倾斜
• rotate 旋转

10. 练习：绘制如下的 3D 图形，熟悉 transform translate transition 的区别。

    
    
    

    练习效果

实现代码如下：

    
    
    
    
    



    

        

            
1
            
2
            
3
            
4
            
5
            
6