关于CSS的几个小技巧，看看你都知道多少(持续更新)

前言删删减减，真的不知道该怎么写。

最近看了《CSS揭秘》，说来惭愧，这本书一直被推荐，最近才开始看。

看完发现，自己对CSS的了解还是太浅薄了，下面列出了一些自己查漏的知识点。

1，CSS变量currentColor

css第三版新增的颜色关键字，这个关键字解析为color.

用法如下：

.demo{
    color:red;
    border:1px solid currentColor;//等同于：border:1px solid red
}

或者你没有设置颜色属性，那么这个currentColor就会自动的从文本颜色那里得到颜色。

2，flex布局，让最后一个元素右对齐

说到flex布局，元素右对齐，我的第一反应就是

//设置内容两端对齐
justify-content: space-between;

但是，如果我希望内容按顺序从左到右排列，但是最后一个元素右对齐，这时上面的布局就不适用了。 可以改成如下： 关键点是，设置最后一个子元素margin-left:auto;

3，让动画效果暂停和继续播放

animation-play-state：paused|running;

举个例子：

一个官网页面，其中有个宽图，显示区域是正方形，需要鼠标放上去后图片往左慢慢移动展示，鼠标移出时，暂停移动，再次移入时，继续滚动。 效果大概如下：

此处有个问题就是，当鼠标移出时，效果会突然消失，有种跳跃感。 要想平滑的过渡，增加animation-play-state属性，改为鼠标移入的时候动画开始，

animation-play-state: running;

默认动画是暂停的:animation-play-state: paused;

.imageBox{
  width:200px;
  height:200px;
  background:url("https://www.guaguafeng.com/images/banner1@2x.png") no-repeat;
  background-size:auto 100% ;
  animation:moveEffect 6s linear infinite alternate;
  animation-play-state: paused;
}
.imageBox:hover{
  animation-play-state: running;
}
@keyframes moveEffect{
  to{
    background-position:100% 0;
  }
}

4,vue3中css的变量v-bind

通过变量在css中直接判断，可以更灵活

.flex_bottom{
    height: v-bind('typeof props.bottomHeight === "number" ? props.bottomHeight + "px" : props.bottomHeight');
}