如何从中心而不是边框​​开始插入盒子阴影？

Question

我目前有一个来自我的<img>边框的盒子阴影，我正在寻找一种方法来反转效果，阴影从中心开始，并填充其余的背景。 Pen

CODE：

＆＃13;

＆＃13;

var medalImg = document.getElementById("benefitsImgMed");
document.getElementById("benefitsImgMed").onclick = function() {
  imgClickFunction1()
};

function imgClickFunction1() {
  medalImg.style.boxShadow = "0px 0px 0px 100px white inset";
  setTimeout(doSomething, 1.6 /*Seconds*/ * 1000);

  function doSomething() {
    /*medalImg.style.borderStyle = "solid";*/
  }
}

＆＃13;

body {
  background-color: black;
}

#benefitsImgMed,
#benefitsImgLig,
#benefitsImgArr,
#benefitsImgNig {
  transition: 2s;
  cursor: pointer;
  z-index: 1;
  position: absolute;
  padding: 10px;
  border-color: white;
  border-width: 5px;
  border-radius: 50%;
  border-style: dashed;
}

#benefitsImgMed:hover {
  box-shadow: inset 0 0 0 50px white;
}

#benefitsImgMed {
  margin-left: 8%;
  margin-top: 6%;
  width: 13%;
  height: 13%;
}

＆＃13;

<div class="benefitImgs">
  <img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9
    140b7f3b7d84274/1510600813361/quality.png" id="benefitsImgMed" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我查看了你的代码改变了一些事情。看起来你可能有一些重复的代码，通过id来查看它们。因此，我实现了一个自定义属性，以帮助我们跟踪单击哪一个。另外，我在内部添加了一个元素，它具有非常小的宽度和高度，向外绘制box-shadow。来吧，给它一个旋转：

function doSomething() {
  console.log('do something...')
}

$(".benefitImgs").click(function () {
  var which = $(this).attr('data-which');
  if (which === "med") {
    $(this).find(".benefitImgsInner").css("box-shadow", "0px 0px 0px 55px white")
    setTimeout(doSomething.bind(this),1.6*1000);
  }
});

body{background-color:black;}

.benefitImgs {  
  width: 13%;
  position: relative;
  margin-left: 8%;
  margin-top: 6%;
  	transition: 2s;
  	cursor:pointer;
  	z-index:1;
    padding: 10px;
    border-color: white;
    border-width: 5px;
    border-radius: 50%;
    border-style: dashed;
}

.benefitImgsInner {
  z-index:-1;
  width:2px;
  height:2px;
  border-radius:50%;
  position:absolute;
  top: 50%;
  left: 50%;
  transition:all 2s ease-in-out;
  transform: translate(-50%, -50%);  
}

.benefitImgs:hover .benefitImgsInner {
  transition:all 2s ease-in-out;
  box-shadow: 0 0 0 50px white;
}

.benefitsImgsImg {    
    max-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="benefitImgs" data-which="med">
  
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgsImg"/>

<div class="benefitImgsInner"></div>
</div>

Answer 2

试试这个解决方案：

注意：我已经大大愚弄了。

＆＃13;

＆＃13;

body{background-color:black;}

#benefitImgMed {
  	transition: 2s;
    width: 200px;
    height: 200px;
  	cursor:pointer;
  	z-index:1;
  	position: absolute;
    border-color: white;
    border-width: 5px;
    border-radius: 50%;
    border-style: dashed;
    overflow: hidden;
}

#benefitImgMed:after{
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  background: white;
  opacity: 0;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  transition: all 1s;
}

#benefitImgMed:hover::after{
  background: white;
  height: 100%;
  width: 100%;
  opacity: 1;
  top: 0px;
  left: 0px;
}

＆＃13;

<div id="benefitImgMed">

</div>

＆＃13;

＆＃13;

＆＃13;