补Css功能

使用text-align创建视觉平衡

text-align:justify ;可以让除了最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘
text-align:center ;可以让文居中对齐 text-align:right;让文本右对齐
text-align:left;是默认值，让文本左对齐

使用width 来调整元素的宽度

width : 220px;

使用heigh来调整元素的高度

height:20px

使用strong标签来加粗文字

 <strong>Stanford University</strong>

使用u标签添加下划线

  <u>Ph.D.students</u>

在段落标签里面嵌套 em 标签表示斜体字

<em>我是斜体字</em>

使用 s 标签给文本添加删除线

  <s>Google</s>

使用 hr 标签创建水平线

<hr>

字体大小

font-size :20px;

给元素添加阴影

offset-x 阴影的水平偏移量；
offset-y 阴影的垂直偏移量；
blur-radius 模糊半径；
spread-radius 阴影扩展半径；
color

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 

CSS 里的 opacity 属性用来设置元素的透明度
属性值为 1 代表完全不透明
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。

使用 text-transform 属性给显示格式
值&alt&alt&alt& 结果
lowercase “transform me” <<<小写
uppercase “TRANSFORM ME” <<<大写
capitalize “Transform Me”<<<首字母大写
initial 使用默认值
使用父元素的 text-transform 值。
none Default:不改变文字。
是指字体大小 font-size 设置段落的 line-height

更改元素的相对位置 position: relative; top:20px; position:absolute;绝对定位
postition:fixed;固定定位的参照物是浏览器的窗口

使用 z-index 属性更改重叠元素的位置 z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面。

渐变色

 background:linear-gradient(35deg,#ccffff,#ffcccc);

重复渐变色

 background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );

Transform scale 属性可以更改元素的大小

transform:scale(1.5)改变原始大小的1.5 倍

属性沿X轴倾斜元素

   transform: skewX(-32deg);

属性沿Y轴倾斜元素

 transform:skewY(-10deg);

月牙图形

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transtion;
    border-radius: 50px;
    box-shadow:25px 10px 0px blue
  }
  <div class = "center" ></div>

基础动画变色

#anim {
  animation-name: colorful;
  animation-duration: 3s;
  @keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

animation-fill-mode 指定了在动画结束时元素的样式
animation-fill-mode: forwards;动画结束时候就在结束的地方不动了
animation-iteration-count: infinite;动画可以设定为永久（ infinite）

球的无限

<style>

  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: 3;
  }

  @keyframes bounce{
    0% {
      top: 0px;
    }
    50% {
      top: 249px;
      width: 130px;
      height: 70px;
    }
    100% {
      top: 0px;
    }
  }
</style>
<div id="ball"></div>

transform:scale()大小的比例
transform:rorate()旋转角度，需要添加(deg)做为单位

animation-timing-function 用来定义动画的速度曲线。
ease-out：动画以高速开始
ease-in，动画以低速开始， 以高速结束
linear：动画从头到尾的速度是相同的。

我们可以用 cubic-bezier
来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内， 其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y
轴代表动画的改变。

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。 其中 p0 和 p3
是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y
值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。