盒子及文字阴影和光标类型—day7—下

111 阅读1分钟

一、盒子阴影

  • 语法
  • box-shadow: h-shadow v-shadow blur spread color inset;
  • box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/外阴影;
  1. 水平阴影: 阴影在盒子的水平方向左右的位置设置;
  2. 垂直阴影: 阴影在盒子的垂直方向上下的位置设置;
  3. 模糊距离: 阴影的羽化模糊的程度,值越大越模糊;
  4. 阴影大小: 设置阴影的大小尺寸,一般可以不设置,有了需求再设置;
  5. 阴影颜色: 阴影的颜色显示;
  6. 内/ 外阴影: 阴影在盒子的内部显示还是外部显示,默认不设置是外部阴影,想要设置内阴影就设置取值为inset;
  • 注意:一个盒子可以加多个阴影,用个英文的逗号隔开即可
  • box-shadow: 5px 5px 10px #000, 20px 20px 10px red;

二、文字阴影

  • 语法:
  • text-shadow: h-shadow v-shadow blur color;
  • text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色 ;
  • 参数和盒子阴影差不多;

三、光标类型cursor

  1. cursor: default;默认的小箭头;
  2. cursor:pointer;小手形状;
  3. cursor:move;移动图标;
  4. cursor:text;文本图标;
  5. cursor:not-allowed;禁止点击图标;