https://juejin.cn/post/6844903518520901639

过渡

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

动画

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

形状转换

transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)

选择器

image.png

阴影

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

背景

background-clip 制定背景绘制（显示）区域 background-origin background-size
1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

文字

换行 语法：word-break: normal|break-all|keep-all;
image.png
语法：word-wrap: normal|break-word;
image.png
超出省略号 text-overflow:clip | ellipsis | string

超出部分省略号 实现
image.png

文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

颜色

rgba

一个是rgba（rgb为颜色值，a为透明度）

hsla

h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”

渐变

线性渐变
image.png

圆锥渐变
https://www.cnblogs.com/coco1s/p/7079529.html

Filter（滤镜）

黑白色filter: grayscale(100%)
反色filter:invert(1)
模糊毛玻璃 filter:blur(3px)

flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

  • flex-direction 属性决定主轴的方向（即项目的排列方向）
  • flex-wrap 换行
  • flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • justify-content 主轴上的对齐方式
  • align-items 项目在交叉轴上如何对齐
  • align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex属性是flex-grow, flex-shrink 和 flex-basis的简写
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

grid 栅格布局

https://www.jianshu.com/p/d183265a8dad

盒模型定义

box-sizing:border-box的时候，边框和padding包含在元素的宽高之内
box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内

媒体查询

媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式

  1. @media screen and (max-width: 960px) {
  2.     body {
  3.         background-color: darkgoldenrod;
  4.     }
  5. }
  6. @media screen and (max-width: 480px) {
  7.     body {
  8.         background-color: lightgreen;
  9.     }
  10. }

反射

这个也可以说是倒影
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片