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 *