Box ombre autour des coins arrondis?

Je suis en utilisant Twitter Bootstrap bibliothèque rapidement jeter ensemble un prototype.

Voici ce que ma mise en page ressemble en 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>

Voici ce que mon MOINS ressemble:

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

Ce qui est vraiment bizarre, c'est que l'ombre portée n'est pas la courbe autour de l'enfant de l'élément angles arrondis:

Box ombre autour des coins arrondis?

Comment puis-je le faire correctement la courbe autour des coins?

source d'informationauteur Naftuli Kay

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *