CSS3 中 box-shadow 妙用on CodePen. 不使用inset，默认阴影在边框外，即阴影向外扩散。使

效果

See the Pen css3中box-shadow妙用 by nigel201611 (@nigel201611) on CodePen.

主要代码

<!--dom结构-->
<div class="logo-part">
  <div class="item">
    <div class="gear positive"></div>
  </div>
  <div class="item">
    <div class="gear reverse"></div>
  </div>
  
</div>



<!--css部分-->
.logo-part {
  overflow: hidden;
  padding:60px;
}

.item {
  float        : left;
  width        : 100px;
  height       : 100px;
  border-radius: 50%;
  box-shadow   : 0 0 0 10px rgba(253, 130, 42, 0.8), 0px 0 0 20px #f5f5f5;
  position     : relative;
}

.item:not(:first-child){
  margin       : 0 0 0 80px;
}

.gear:before {
  content                 : '';
  width                   : 26px;
  height                  : 26px;
  display                 : block;
  position                : absolute;
  box-shadow              : 37px 115px 0 #f5f5f5, 37px -41px 0 #f5f5f5, -41px 37px 0 #f5f5f5, 115px 37px 0 #f5f5f5;
  border-radius           : 20%;
  -webkit-transform-origin: 50px 50px;
  transform-origin        : 50px 50px
}

.positive:before {
  animation        : scope_cw 10s linear infinite;
  -moz-animation   : scope_cw 10s linear infinite;
  -webkit-animation: scope_cw 10s linear infinite;
  -o-animation     : scope_cw 10s linear infinite
}

.reverse:before {
  animation        : scope_ccw 10s linear infinite;
  -moz-animation   : scope_ccw 10s linear infinite;
  -webkit-animation: scope_ccw 10s linear infinite;
  -o-animation     : scope_ccw 10s linear infinite
}

@keyframes scope_cw {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes scope_ccw {
  from {
    transform: rotate(22.5deg)
  }

  to {
    transform: rotate(-382.5deg)
  }
}

容易犯错的点：父级元素或者设置了gear效果的同级元素记得要设置position:relative;

深挖知识点

box-shadow
transform-origin
animation

box-shadow

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的排序（或者z-ordering）和多个 text shadows 规则相同(第一个阴影在最上面)。

取值

inset 不使用inset，默认阴影在边框外，即阴影向外扩散。使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下。
offset-x offset-y 这是头两个 length 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过y垂直方向向下。 offset-x 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 offset-y 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看length。如果两者都是0，那么阴影位于元素后面。这时如果设置了blur-radius 或spread-radius 则有模糊效果。需要考虑 inset
blur-radius 这是第三个 length 值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。需要考虑 inset
spread-radius 这是第四个 length 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑 inset
color 相关事项查看 color 。如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
声明多个shadows时，用逗号将shadows隔开。

结合例子分析

.item {
  float        : left;
  width        : 100px;
  height       : 100px;
  border-radius: 50%;
  box-shadow   : 0 0 0 10px rgba(253, 130, 42, 0.8), 0px 0 0 20px #f5f5f5;
  position     : relative;
}

由于设置了圆角，所以box-shadow也会有圆角，spread-radius分别是10px，20px;不同的颜色, 水平垂直都是0，可以在脑海里想像两个不同颜色的圆环叠在一起的效果。

.gear:before {
  content                 : '';
  width                   : 26px;
  height                  : 26px;
  display                 : block;
  position                : absolute;
  box-shadow              : 37px 115px 0 #f5f5f5, 37px -41px 0 #f5f5f5, -41px 37px 0 #f5f5f5, 115px 37px 0 #f5f5f5;
  border-radius           : 20%;
  -webkit-transform-origin: 50px 50px;
  transform-origin        : 50px 50px
}

在类gear的伪类before上设置了box-shadow box-shadow : 37px 115px 0 #f5f5f5, 37px -41px 0 #f5f5f5, -41px 37px 0 #f5f5f5, 115px 37px 0 #f5f5f5; 设置了4个不同位置的阴影，4个不同阴影的位置可以自己微调，需要根据元素尺寸(注意这里的元素是就是.gear:before这个伪元素（双冒号是css3写法，单冒号是css2写法，表示的都是伪元素）)来计算。

transform-origin

transform-origin CSS属性让你更改一个元素变形的原点。transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

一个值：必须是length，percentage，或 left, center, right, top, bottom关键字中的一个。
两个值：其中一个必须是length，percentage，或left, center, right关键字中的一个。另一个必须是length，percentage，或top, center, bottom关键字中的一个。
三个值：前两个值和只有两个值时的用法相同。第三个值必须是。它始终代表Z轴偏移量。

x-offset 定义变形中心距离盒模型的左侧的或偏移值。
y-offset 定义变形中心距离盒模型的顶部的或偏移值。
x-offset-keyword left，right或center中之一，定义相对应的变形中心偏移。
y-offset-keyword top，bottom或center中之一，定义相对应的变形中心偏移。
z-offset 定义变形中心距离用户视线（z=0处）的length（不能是percentage）偏移值。

animation

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

属性 animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。 animation-fill-mode:none | forwards | backwards | both;

forwards 目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值
backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值
both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

属性 animation-direction 指示动画是否反向播放，它通常在简写属性animation中设定 animation-direction:normal | reverse | alternate | alternate-reverse

normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse 反向交替，反向开始交替动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

结合例子分析

 animation        : scope_cw 10s linear infinite;

例子中animation-name:scope_cw,animation-duration:10s,animation-timing-function:linear,animation-iteration-count:infinite; 一般常用的就是这4个，其他基本使用默认值