contour sur un seul bord

Question

Comment appliquer un insertion de la bordure dans un élément HTML, mais seulement sur un côté de celui-ci. Jusqu'à présent, j'utilisais une image pour ce faire (GIF/PNG) que j'utilisais ensuite comme arrière-plan, que j'étirais (repeat-x) et que je positionnais un peu à l'écart du haut de mon bloc. Récemment, j'ai découvert le aperçu La propriété CSS, c'est génial ! Mais elle semble entourer tout le bloc... Est-il possible d'utiliser cette propriété outline pour ne le faire que sur une seule bordure ? Par ailleurs, si ce n'est pas le cas, avez-vous une astuce CSS qui pourrait remplacer l'image d'arrière-plan ? (afin que je puisse personnaliser les couleurs du contour plus tard en utilisant CSS, etc). Merci d'avance !

Voici une image de ce que j'essaie d'obtenir : http://exiledesigns.com/stack.jpg

Answer 1

Vous pouvez utiliser box-shadow pour créer un contour sur un côté. Comme outline , box-shadow ne modifie pas la taille du modèle de boîte.

Cela met une ligne sur le dessus :

box-shadow: 0 -1px 0 #000;

J'ai fait un jsFiddle où vous pouvez le voir en action.

La syntaxe est la suivante box-shadow: offset-x | offset-y | blur-radius | color

---

INSET

Pour un encart utilisez la fonction encart mot-clé. Cela permet de placer une ligne insérée en haut :

box-shadow: 0 1px 0 #000 inset;

Plusieurs lignes peuvent être ajoutées en utilisant des déclarations séparées par des virgules. Ceci met une ligne d'insertion en haut et à gauche :

box-shadow: 0 1px 0 #000 inset,
            1px 0 0 #000 inset;

Pour plus de détails sur la façon dont box-shadow fonctionne, consultez le Page MDN .

Answer 2

Outline le fait en effet s'appliquent à l'ensemble de l'élément .

Maintenant que je vois votre image, voici comment la réaliser.

.element {
  padding: 5px 0;
  background: #CCC;
}
.element:before {
  content: "\a0";
  display: block;
  padding: 2px 0;
  line-height: 1px;
  border-top: 1px dashed #000; 
}
.element p {
  padding: 0 10px;
}

<div class="element">
  <p>Some content comes here...</p>
</div>

(Ou voir démo externe. )

Toutes les tailles et couleurs ne sont que des valeurs indicatives, vous pouvez les modifier pour obtenir le résultat exact souhaité.

Remarque importante : .l'élément doit avoir display:block; (par défaut pour un div) pour que cela fonctionne. Si ce n'est pas le cas, veuillez fournir votre code complet, afin que je puisse élaborer une réponse spécifique.

Answer 3

Essayez avec Shadow( Like border ) + Border

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;

Answer 4

Je sais que c'est vieux. Mais oui. Je préfère une solution beaucoup plus courte que la réponse de Giona.

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

Answer 5

J'aime donner une bordure à mon champ de saisie, supprimer le contour au moment de la mise au point et "souligner" la bordure à la place :

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

Vous pouvez également le faire avec une bordure transparente :

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }