Wie kann ich diesen Schatten auf diese Teilung einstellen?

Question

Hallo, ich möchte diesen Schatten zu meiner Abteilung anpassen, aber wenn ich versuche, der Abteilung "modalita" einen Grenzradius hinzuzufügen, funktioniert es nicht, wie mache ich das? Jemand kann mir bitte dabei helfen? vielen Dank

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

Oder ein anderer Schatten, danke!

Answer 1

müssen Sie möglicherweise einen Schatten auf die Kinder legen und etwas davon verstecken.

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