css - 如何在圆圈内实现特定的阴影效果

Question

我想要这样的东西，但不幸的是无法获得这种阴影效果任何帮助都会很棒

    .circle{
  width:50px;
  height:50px;
  border-radius:50%;
  background-color :yellow;
  display:flex;
  align-items:center;
  justify-content:center;
}
.inner_img{

}

我想要这样的东西:

这是附加的 fiddle 文件 http://jsfiddle.net/3u0mxjqq/188/

Answer 1

我尝试使用 text-shadow: rgb(39, 118, 152) -1px 1px 复制相同的效果。检查这个fiddle

.inner_img {
  color: white;
  font-size: 22px;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(59, 175, 228);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-shadow: rgb(39, 118, 152) -1px 1px, rgb(39, 118, 152) -2px 2px, rgb(39, 118, 152) -3px 3px, rgb(39, 118, 152) -4px 4px, rgb(39, 118, 152) -5px 5px, rgb(39, 118, 152) -6px 6px, rgb(39, 118, 152) -7px 7px, rgb(39, 118, 152) -8px 8px, rgb(39, 118, 152) -9px 9px, rgb(39, 118, 152) -10px 10px, rgb(39, 118, 152) -11px 11px, rgb(39, 118, 152) -12px 12px, rgb(39, 118, 152) -13px 13px, rgb(39, 118, 152) -14px 14px, rgb(39, 118, 152) -15px 15px, rgb(39, 118, 152) -16px 16px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="icon">
    <div class="inner_img">
      <i class="fa fa-search"></i>
    </div>
  </div>
</div>