我該如何調整這個影子到這個部門？

Question

嗨，我想調整這個陰影我的師，但如果我嘗試添加邊界半徑德除「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

您可能需要適當地遮蔽子女並隱藏其中的一部分。

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

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