3月12日 笔记

时间:2022-11-05 14:05:41

圆角边框

border-radius :用于指定圆角边框的圆角半径。

  • 如指定1个参数,则4个圆角都使用该长度作为半径。
  • 如指定2个参数,则第一个参数作为左上角和右下角的半径,第二个参数作为右上角和左下角的半径。

  • 如指定3个参数,第一个参数作为左上角的半径,第二个参数作为右上角和左下角的半径,第三个参数作为右下角的半径。

边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

  • 第一个参数:控制阴影在水平方向的偏移。
  • 第二个参数:控制阴影在垂直方向的偏移。
  • 第三个参数:控制阴影的模糊程度。
  • 第四个参数:控制阴影的缩放程度。
  • 第五个参数:改属性值控制阴影的颜色。

内部阴影
{box-shadow:inset x-offset y-offset blur-radius spread-radius color}

对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}


渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间,使其以平滑渐变的方式发生改变,产生动画效果。有4个参数。

  • 第一个参数:指定对哪个HTML元素进行处理。
  • 第二个参数:定义持续时间。
  • 第三个参数:指定渐变的速度。(有多个可用的属性值,请完成自学)
  • 第四个参数:指定延迟时间。

如果想设置多个属性的渐变动画,使用逗号分隔。

transition: width,height 1s,1s ease,ease;

Animation动画

annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性,有5个参数:

  • 第一个参数:指定动画的名称。
  • 第二个参数:指定动画的持续时间。
  • 第三个参数:指定动画的变化速度。
  • 第四个参数:指定动画延迟多久开始执行。
  • 第五个参数:指定动画循环执行的次数。