我怎样才能将这个阴影调整到这个部门？

Question

嗨我想调整这个阴影到我的师但是如果我尝试添加边界半径到de division“modalita”它不起作用，我怎么做？有人可以帮我这个吗？非常感谢你

.modalita {
  width: 250px;
  height: inherit;
  text-align: center;
  display: inline-block;
  float: center;
  margin-right: 6px;
  margin-left: 6px;
  margin-bottom: 10px;
  -webkit-box-shadow: rgba(0,0,0,0.8) 0px 0 10px;
 -moz-box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}

.verde {
  height: 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  padding-top: 30px;
  font-size: 30px;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-family: sans-serif;
  color: white;
  margin-bottom: 25px;
  background: linear-gradient(237deg, #69f97c, #004709);
background-size: 400% 400%;

-webkit-animation: verde 4s ease infinite;
-moz-animation: verde 4s ease infinite;
-o-animation: verde 4s ease infinite;
animation: verde 4s ease infinite;
}

.vtesto {
  border: 2px solid #37bf49;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  height: auto;
  margin-top: -25px;
  font-family: sans-serif;
  letter-spacing: 1px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

<div class="modalita">
<h2 class="verde">Vanilla</h2>

<p class="vtesto">Questo &egrave; una descrizione di esempio si &egrave; pregati di cambiarla il prima possibile grazie...</p>
</div>

或另一个影子，谢谢！

Answer 1

你可能需要在孩子身上涂抹阴影并隐藏其中一些。

＆＃13;

＆＃13;

.modalita {
  width: 250px;
  height: inherit;
  text-align: center;
  display: inline-block;
  float: center;
  margin-right: 6px;
  margin-left: 6px;
  margin-bottom: 10px;
}

.verde {
 box-shadow:0 10px white, rgba(0,0,0,0.8) 0 0 10px;/* extra white dropping shadow to blend & hide the gray one overlapping the next element*/
  height: 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  padding-top: 30px;
  font-size: 30px;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-family: sans-serif;
  color: white;
  /*margin-bottom: 25px;*/
  background: linear-gradient(237deg, #69f97c, #004709);
background-size: 400% 400%;

-webkit-animation: verde 4s ease infinite;
-moz-animation: verde 4s ease infinite;
-o-animation: verde 4s ease infinite;
animation: verde 4s ease infinite;
}

.vtesto {
  -webkit-box-shadow: rgba(0,0,0,0.8) 0px 0 10px;
 -moz-box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 box-shadow:0  rgba(0,0,0,0.8) 0 0 10px;

  border: 2px solid #37bf49;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  height: auto;
  margin-top: -25px;
  font-family: sans-serif;
  letter-spacing: 1px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

＆＃13;

<div class="modalita">
<h2 class="verde">Vanilla</h2>

<p class="vtesto">Questo &egrave; una descrizione di esempio si &egrave; pregati di cambiarla il prima possibile grazie...</p>
</div>

＆＃13;

＆＃13;

＆＃13;