web-dev-qa-db-fra.com

contour sur une seule bordure

Comment appliquer une bordure inset dans un élément HTML, mais seulement d'un côté. Jusqu'à présent, j'utilisais une image (GIF/PNG) que j'utiliserais ensuite comme arrière-plan, je l'étirerais (repeat-x) et me positionnerais un peu en dehors du bloc Récemment, j'ai découvert la propriété CSS outline, ce qui est génial! Mais semble encercler tout le bloc ....... Est-il possible d'utiliser cette propriété de contour pour le faire sur une seule bordure? Sinon, avez-vous une astuce CSS qui pourrait remplacer l'image de fond ? (afin que je puisse personnaliser les couleurs du contour plus tard en utilisant CSS, etc) . Merci d'avance!

Voici une image de ce que je cherche à réaliser: http://exiledesigns.com/stack.jpg

htmlcsscss3
75
Corinne

Le schéma s'applique en effet s’applique à l’ensemble de l’élément .

Maintenant que je vois votre image, voici comment y parvenir.

.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 espaces réservés, vous pouvez le modifier pour qu'il corresponde exactement au résultat souhaité.

Remarque importante: .element doit avoir display:block; (valeur 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.

42
Giona

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 vérifier en action.

INCRUSTATION

Pour une bordure inset, utilisez le mot clé inset. Cela place une ligne en-dessous:

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

Plusieurs lignes peuvent être ajoutées à l'aide d'instructions séparées par des virgules. Cela met une ligne en haut et à gauche:

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

Pour plus de détails sur le fonctionnement de box-shadow, consultez la page MDN .

101
chowey

Essayez avec Shadow (Like border) + Border  

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
9
Thilanka De Silva

Je sais que c'est vieux. Mais ouais. 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;}
}
0
Andris

J'aime attribuer une bordure à mon champ de saisie, supprimer le contour de la mise au point et "dessiner" 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;
  }
 }
0
Robin Wieruch

Le grand avantage de HTML/CSS est qu’il existe généralement plus d’un moyen d’obtenir le même effet. Voici une autre solution qui fait ce que vous voulez:

<nav id="menu1">
    <ul>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
    </ul>
</nav>

nav {
    background:#666;
    margin:1em;
    padding:.5em 0;
}
nav ul {
    border-top:1px dashed #fff;
    list-style:none;
    padding:.5em;
}
nav ul li {
    display:inline-block;
}
nav ul li a {
    color:#fff;
}

http://jsfiddle.net/10basetom/uCX3G/1/

0
thdoan