flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。

以原有例子为模型，父元素命名为div0，1-5五个子元素分别命名为div1、div2、...、div5。

父元素需要设定：

display：flex，width：350px

所有子元素需要设定：

flex-basis：100px, 即不发生收缩时子元素原本的宽度

以上为先决条件。

子元素宽度之和与父元素宽度的差值：

100*5-350=150px

这时通过设定子元素的flex-shrink属性来决定150px总缩减量如何分配给5个子元素。

按照之前的预设，div2 的实际宽度为其它子元素的 1/3。

设子元素的宽度分别为w1、w2、...、w5,div2的flex-shrink值与其它子元素flex-shrink的值之比为X，有如下方程组:

w1=w3=w4=w5=100-150(1/X+4)
w2=100-150(X/X+4)
w1=w3=w4=w5=3w2

解方程组得

X=19/5,w2=26.92,w1=w3=w4=w5=80.77

绘制太阳系各大行星运行轨迹：

<div class="solarsys">
  <!--太阳-->
  <div class='sun'></div>

  <!--水星轨道-->
  <div class='mercuryOrbit'></div>

  <!--水星-->
  <div class='mercury'></div>

  <!--金星轨道-->
  <div class='venusOrbit'></div>

  <!--金星-->
  <div class='venus'></div>

  <!--地球轨道-->
  <div class='earthOrbit'></div>

  <!--地球-->
  <div class='earth'></div>

  <!--火星轨道-->
  <div class='marsOrbit'></div>

  <!--火星-->
  <div class='mars'></div>

  <!--木星轨道-->
  <div class='jupiterOrbit'></div>

  <!--木星-->
  <div class='jupiter'></div>

  <!--土星轨道-->
  <div class='saturnOrbit'></div>

  <!--土星-->
  <div class='saturn'></div>

  <!--天王星轨道-->
  <div class='uranusOrbit'></div>

  <!--天王星-->
  <div class='uranus'></div>

  <!--海王星轨道-->
  <div class='neptuneOrbit'></div>

  <!--海王星-->
  <div class='neptune'></div>
</div>

尝试一下 »

简单的鼠标悬浮过渡效果:

div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}

尝试一下 »

写 box-shadow 的依次顺序为：

h-shadow   v-shadow   blur   spread   color   insect

水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影 

CSS 中 border: 1px solid rgba(0, 0, 0, 0.1); 是什么意思？

意思是: 设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。

其中，rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。