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

  1. 22

    Votre div.navbar div.navbar-messages élément manque de coins arrondis, de sorte que l'ombre apparaît carrée. Tel que décrit par son nom, box-shadow dessine une ombre autour de l'élément de boîte deet non pas l'élément contenudonc si la boîte elle-même n'a pas de coins arrondis, alors que ni son ombre.

    Vous pouvez essayer d'appliquer la même border-radius styles de div.navbar div.navbar-messages ainsi, de sorte que son ombre se courbe vers les coins:

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

    yep...il suffit de mettre un border-radius sur la div qui a de l'ombre. Assurez-border-radius valeur correspond à celle de l'objet à l'intérieur de la div et ils correspondent correctement.

  3. 0

    J'ai ceci:

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

    Donc:

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

    Qui a fonctionné pour moi très bien! Merci beaucoup.