appliquer l'ombre portée au bord-haut seulement?

Question

appliquer l'ombre portée au bord-haut seulement?

Comment appliquer une ombre portée à un bord de bordure spécifique?

Par exemple, j'ai le code suivant:

header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
    padding-top:25px;
}

Je veux une ombre portée (1px 1px 1px #cdcdcd) appliquée uniquement à border-top.

Quelle est la meilleure façon d'y parvenir?

Modifier

C'est essentiellement ce que je cherche

div {
    border-top: 1px solid #202020;
    margin-top: 25px;
    margin-left:25px;
    width: 158px;
    padding-top:25px;
    -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
}

Cependant, l'ombre semble être impactée par le rembourrage. Y a-t-il de toute façon pour attacher l'ombre à la bordure seule sans ajuster le rembourrage?

22

border css dropshadow

demandé sur MultiplyByZer0 2012-03-20 22:32:00

6 réponses

score 35 · Answer 1

Quelque chose comme ça?

div {
  border: 1px solid #202020;
  margin-top: 25px;
  margin-left: 25px;
  width: 158px;
  height: 158px;
  padding-top: 25px;
  -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}

<div></div>

score 8 · Answer 2

Si vous voulez appliquer l'ombre à l'intérieur de l'élément (inset) mais que vous voulez seulement qu'elle apparaisse d'un seul côté, vous pouvez définir une valeur négative au paramètre "spread" (5ème paramètre dans le deuxième exemple).

Pour le supprimer complètement, faites-le de la même taille que le flou des ombres (4ème paramètre dans le deuxième exemple) mais en tant que valeur négative.

Rappelez-vous également d'ajouter le décalage à la position y (3ème paramètre dans le deuxième exemple) afin que le suivant:

box-shadow:         inset 0px 4px 3px rgba(50, 50, 50, 0.75);

Devient:

box-shadow:         inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);

Vérifiez ce violon mis à jour: http://jsfiddle.net/FrEnY/1282/{[13] } et plus sur les paramètres box-shadow ici: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

score 3 · Answer 3

La réponse simple est que vous ne pouvez pas. box-shadow s'applique uniquement à l'élément entier. Vous pouvez utiliser une approche différente et utiliser :: before en CSS pour insérer un élément haut de 1 pixel dans header nav et définir l'ombre de la boîte à la place.

score 1 · Answer 4

Je trouve que l'utilisation de ces outils interactifs aide à visualiser ce qui se passe et ce qui est possible

Http://css3gen.com/box-shadow/

Http://www.cssmatic.com/box-shadow

Http://css3generator.com/

Edit: consultez les autres outils pour expérimenter avec les autres générateurs et combinaisons. Je dois me rappeler parfois que juste parce que vous pouvez, ne signifie pas que vous devriez - il est facile de se laisser emporter!

score 1 · Answer 5

Plusieurs ombres de boîte l'ont fait pour moi.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

Http://jsfiddle.net/kk66f/

score 0 · Answer 6

.item .content{
    width: 94.1%;
    background: #2d2d2d;
    padding: 3%;
    border-top: solid 1px #000;
    position: relative;
}
.item .content:before{
      content: "";
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: 1px;
      -webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      -moz-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      box-shadow: 0px 1px 13px rgba(255,255,255,1);
      z-index: 100;
}

Je suis comme utiliser quelque chose comme ça pour cela.

Las etiquetas más populares

appliquer l'ombre portée au bord-haut seulement?

6 réponses