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

Question

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

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

}

我想要这样的事情：

这是附加小提琴文件http://jsfiddle.net/3u0mxjqq/188/

Answer 1

使用box-shadow规则并不能使用字体真棒字形。

您可以使用多个text-shadow实例来实现此效果。

解决方案（仅限CSS3 /工作IE10 +）

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


.fa-search{
  text-shadow:rgb(148, 148, 0) 1px 1px, rgb(148, 148, 0) 2px 2px, rgb(148, 148, 0) 3px 3px, rgb(148, 148, 0) 4px 4px, rgb(148, 148, 0) 5px 5px, rgb(148, 148, 0) 6px 6px, rgb(148, 148, 0) 7px 7px, rgb(148, 148, 0) 8px 8px, rgb(148, 148, 0) 9px 9px, rgb(148, 148, 0) 10px 10px, rgb(148, 148, 0) 11px 11px, rgb(148, 148, 0) 12px 12px, rgb(148, 148, 0) 13px 13px, rgb(148, 148, 0) 14px 14px, rgb(148, 148, 0) 15px 15px, rgb(148, 148, 0) 16px 16px, rgb(148, 148, 0) 17px 17px, rgb(148, 148, 0) 18px 18px, rgb(148, 148, 0) 19px 19px, rgb(148, 148, 0) 20px 20px, rgb(148, 148, 0) 21px 21px, rgb(148, 148, 0) 22px 22px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="circle">
  <i class="fa fa-search"></i>
</div>

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一种方法是制作一个div并将其准确定位在正确的位置，就好像它是您选择的阴影一样。这与正确的z-index一起使得可以将其正确地定位在中间的图像下但位于圆的顶部。希望这有帮助。如果你想让圆圈发光，请看：http://cssdeck.com/labs/glowing-circle 此外，如果图像包含在圆圈的中间，则框阴影也可以在图像的任何方向上提供任何颜色的阴影。