box-shadow

box-shadow: [?内部inset/外部] [X轴偏移量] [Y轴偏移量] [模糊半径] [扩散半径] [color]

text-shadow

text-shadow: [x方向偏移量] [y方向偏移量] [模糊半径] [color]

border-radius

background

  • 雪碧图动画
  • 背景图尺寸适应
    • 控制背景图位置:background-position: center center
    • 背景大小:background-size: 100% 100%; (覆盖cover,完整显示contain)
    • 重复background-repeat

clip-path

对内容裁剪

  1. <div class="container"></div>
  2. <style>
  3. .container {
  4. width: 400px;
  5. height: 300px;
  6. background: url(./public/favicon.ico);
  7. background-size: cover;
  8. background-position: center center;
  9. background-repeat: no-repeat;
  10. padding: 10px;
  11. /* 在100,100地方,有半径为50px的圆形 */
  12. clip-path: circle(50px at 100px 100px);
  13. /* 动画 */
  14. transition: clip-path .4s;
  15. }
  16. .container:hover {
  17. clip-path: circle(80px at 100px 100px);
  18. }
  19. </style>

transform

  • translate
  • scale
  • skew
  • rotate
  • 3D

    transform属性不可以随便交换 transform: rotate(30deg) translateX(30px)transform: translateX(30px) ``rotate(30deg)是不一样的

filter

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter