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.     }
  17.     .container:hover {
  18.       clip-path: circle(80px at 100px 100px);
  19.     }
  20.   </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