Box shadow attorno agli angoli arrotondati?

Sto utilizzando la libreria Bootstrap di Twitter per creare rapidamente un prototipo.Box shadow attorno agli angoli arrotondati?

Ecco cosa il mio layout appare come in HTML:

<div class="navbar-messages container"> 
    <div class="alert alert-info fade in"> 
     <button class="close" data-dismiss="alert">&times;</button> 
     <strong>Awesomeness!</strong> You're pretty cool. 
    </div> 
    <div class="alert alert-error fade in"> 
     <button class="close" data-dismiss="alert">&times;</button> 
     <strong>Awesomeness!</strong> You're pretty cool. 
    </div> 
</div>

Ecco quello che i miei appare meno come:

div.navbar div.navbar-messages { 
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2)); 

    div.alert { 
     -webkit-border-radius: 0px; 
     -moz-border-radius: 0px; 
     border-radius: 0px; 

     margin-bottom: 0px; 

     &:last-child { 
      -webkit-border-bottom-right-radius: 4px; 
      -webkit-border-bottom-left-radius: 4px; 
      -moz-border-radius-bottomright: 4px; 
      -moz-border-radius-bottomleft: 4px; 
      border-bottom-right-radius: 4px; 
      border-bottom-left-radius: 4px; 
     } 
    } 
} 

.drop-shadow(@params) { 
    -moz-box-shadow: @params; 
    -webkit-box-shadow: @params; 
    box-shadow: @params; 
}

La cosa veramente strana è che l'ombra non è curva intorno al bambino elemento del angoli curvi:

enter image description here

Come posso farcela correttamente curva attorno agli angoli?

fonte

2012-05-13 Naftuli Kay

aumento numero shadow casella – Bongs

Forse c'è uno sfondo sfumato dietro il pulsante che non viene ritagliato dal raggio del bordo? Non riesco a riprodurre il problema usando il codice che hai fornito nella domanda, vedi [questo jsfiddle] (http://jsfiddle.net/53kDh/1/). (Testato in FF e IE9, non menzioni un browser specifico nella tua domanda.) – Jeroen

@Jeroen: il tuo violino non corrisponde al codice qui. In questa domanda, l'ombra del riquadro si trova su un elemento padre. Nel tuo violino, l'ombra del riquadro si applica solo agli elementi 'div.alert'. – BoltClock

L'elemento div.navbar div.navbar-messages manca di angoli arrotondati, pertanto l'ombra appare quadrata. Come descritto dal suo nome, box-shadow disegna un'ombreggiatura intorno alla casella dell'elemento e non ai contenuti dell'elemento, quindi se la casella non ha angoli arrotondati, la sua ombra non ne sarà nemmeno l'ombra.

È possibile provare ad applicare gli stessi stili border-radius a div.navbar div.navbar-messages pure, così la sua ombra si curva attorno agli angoli:

div.navbar div.navbar-messages { 
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2)); 
    .rounded-bottom-corners(4px); 

    div.alert { 
     -webkit-border-radius: 0px; 
     -moz-border-radius: 0px; 
     border-radius: 0px; 

     margin-bottom: 0px; 

     &:last-child { 
      .rounded-bottom-corners(4px); 
     } 
    } 
} 

.drop-shadow(@params) { 
    -moz-box-shadow: @params; 
    -webkit-box-shadow: @params; 
    box-shadow: @params; 
} 

.rounded-bottom-corners(@params) { 
    -webkit-border-bottom-right-radius: @params; 
    -webkit-border-bottom-left-radius: @params; 
    -moz-border-radius-bottomright: @params; 
    -moz-border-radius-bottomleft: @params; 
    border-bottom-right-radius: @params; 
    border-bottom-left-radius: @params; 
}

fonte

2012-05-13 19:24:39 BoltClock

Ho notato che stai passando parametri nel tuo esempio css. Ho fatto una rapida ricerca e non ho trovato nulla di utile. È questo per la dimostrazione del concetto o è davvero qualcosa che puoi fare? – Jacksonkr

@Jackson: è una funzione MENO. Ho appena notato che ora la domanda non è taggata [meno], quindi l'ho aggiunta. Puoi leggere a riguardo qui: http://lesscss.org/#-parametric-mixins – BoltClock

sì ... basta mettere un border-radius sul div che ha l'ombra . Assicurati che il valore del raggio del bordo corrisponda a quello dell'oggetto all'interno del div e che corrispondano correttamente.

fonte

2013-09-22 20:24:57 user2703774

ho questo:

blockquote { 
    border: none; 
    font-style: italic; 
    font-size: 20px; 
    line-height: 40px; 
    font-weight: 300; 
    padding: 0; 
    margin: 30px 0; 
    text-shadow: 0 1px 1px #666666; 
    background: rgba(255,255, 255, 0.4); 
    box-shadow: 0px 0.5px 1px #888888; 
    padding-left: 10px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
}

Quindi:

-webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px;

che ha funzionato per me abbastanza bene! Molte grazie.

fonte

2016-11-11 14:25:39

Box shadow attorno agli angoli arrotondati?

risposta

Problemi correlati