web-dev-qa-db-fra.com

appliquer l'ombre portée au bord supérieur uniquement?

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 recherche

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 affectée par le rembourrage. Est-il possible de fixer l'ombre à la bordure seule sans ajuster le rembourrage?

cssborderdropshadow
25
AMC

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>
41
danblundell

Dans le cas où vous souhaitez appliquer l'ombre à l'intérieur de l'élément (inset) mais que vous souhaitez qu'elle apparaisse d'un seul côté, vous pouvez définir une valeur négative pour le paramètre "spread" (5ème paramètre dans le second Exemple).

Pour le supprimer complètement, faites-lui 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.

N'oubliez pas non plus d'ajouter l'offset à la position y (3e paramètre dans le deuxième exemple) pour que ce qui suit:

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/ et plus sur les paramètres de l'ombre de la boîte ici: http://www.w3schools.com/cssref/ css3_pr_box-shadow.asp

8
dnlmzw

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 de 1 pixel de haut dans l'en-tête de navigation et définir l'ombre de la boîte à la place.

3
Ben Clayton

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/

1
shaunw

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

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

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

http://css3generator.com/

Modifier: Découvrez les autres outils pour expérimenter avec les autres générateurs et combinaisons. Je dois parfois me rappeler que ce n'est pas parce que vous le pouvez - c'est facile à emporter!

1
shipwreck
.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 ça.

0
Arthur Yakovlev