Puis-je append une couleur d’arrière-plan uniquement pour le remplissage?

J’ai une boîte d’en-tête incluant une bordure et un remplissage et une couleur d’arrière-plan pour cette boîte. Puis-je changer la couleur d’arrière-plan pour la zone remplie après la bordure et la même couleur d’arrière-plan ?

Juste une pincée du code où je veux la couleur d’arrière-plan rembourrée:

nav { margin:0px auto; width:100%; height:50px; background-color:grey; float:left; padding:10px; border:2px solid red; } 

Une autre option avec CSS pur serait quelque chose comme ceci:

 nav { margin: 0px auto; width: 100%; height: 50px; background-color: white; float: left; padding: 10px; border: 2px solid red; position: relative; z-index: 10; } nav:after { background-color: grey; content: ''; display: block; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: -1; } 

Démo ici

Je suis désolé tout le monde que c’est la solution la vraie où vous n’avez pas à définir le remplissage.

http://jsfiddle.net/techsin/TyXRY/1/

Ce que j’ai fait…

  • Appliqué deux dégradés sur le fond avec les deux couleurs de départ et de fin. Au lieu d’utiliser une couleur unie. La raison étant que vous ne pouvez pas avoir deux couleurs unies pour un arrière-plan.
  • Puis appliqué différentes propriétés d’arrière-plan à chacun.
  • en faisant ainsi une couleur s’étendre à la boîte de contenu et à l’autre à la bordure, révélant le remplissage.

Intelligent si je le dis moi-même.

 div { padding: 35px; background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%); background-clip: content-box, padding-box; } 

Utilisez les propriétés background-clip et box-shadow .

1) Définir le background-clip: content-box – cela limite uniquement l’arrière-plan au contenu lui-même (au lieu de couvrir à la fois le remplissage et la bordure)

2) Ajoutez une box-shadow interne avec le rayon d’étalement défini à la même valeur que le remplissage.

Donc, disons que le remplissage est 10px – set box-shadow: inset 0 0 0 10px lightGreen – ce qui fera que la zone de remplissage sera vert clair.

Démo de codepen

 nav { width: 80%; height: 50px; background-color: gray; float: left; padding: 10px; /* 10px padding */ border: 2px solid red; background-clip: content-box; /* <---- */ box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */ } ul { list-style: none; } li { display: inline-block; } 
 

The light green background color shows the padding of the element

Vous pouvez utiliser des dégradés d’arrière-plan pour cet effet. Pour votre exemple, ajoutez simplement les lignes suivantes (c’est juste parce qu’il faut utiliser des préfixes de fournisseur):

 background-image: -moz-linear-gradient(top, #000 10px, transparent 10px), -moz-linear-gradient(bottom, #000 10px, transparent 10px), -moz-linear-gradient(left, #000 10px, transparent 10px), -moz-linear-gradient(right, #000 10px, transparent 10px); background-image: -o-linear-gradient(top, #000 10px, transparent 10px), -o-linear-gradient(bottom, #000 10px, transparent 10px), -o-linear-gradient(left, #000 10px, transparent 10px), -o-linear-gradient(right, #000 10px, transparent 10px); background-image: -webkit-linear-gradient(top, #000 10px, transparent 10px), -webkit-linear-gradient(bottom, #000 10px, transparent 10px), -webkit-linear-gradient(left, #000 10px, transparent 10px), -webkit-linear-gradient(right, #000 10px, transparent 10px); background-image: linear-gradient(top, #000 10px, transparent 10px), linear-gradient(bottom, #000 10px, transparent 10px), linear-gradient(left, #000 10px, transparent 10px), linear-gradient(right, #000 10px, transparent 10px); 

Pas besoin de balisage inutile.

Si vous souhaitez simplement créer une double bordure, vous pouvez utiliser le contour et la bordure au lieu de la bordure et du remplissage.

Bien que vous puissiez également utiliser des pseudo-éléments pour obtenir l’effet souhaité, je vous le déconseille. Les pseudo-éléments sont un outil très puissant fourni par CSS. Si vous les «gaspillez» dans des choses comme ça, vous les manquerez probablement ailleurs.

Je n’utilise que des pseudo-éléments s’il n’y a pas d’autre moyen. Non pas parce qu’ils sont mauvais, bien au contraire, parce que je ne veux pas gaspiller mon Joker.

les réponses ont toutes les solutions possibles

J’en ai une autre avec BOX-SHADOW

ici c’est JSFIDDLE

et le code

 nav { margin:0px auto; width:100%; height:50px; background-color:grey; float:left; padding:10px; border:2px solid red; box-shadow: 0 0 0 10px blue inset; } 

il prend également en charge dans IE9, donc c’est mieux que la solution en dégradé, ajoutez des préfixes appropriés pour plus de support

IE8 ne supporte pas, quelle honte!

Vous ne pouvez pas définir la couleur du remplissage.

Vous devrez créer un élément wrapper avec la couleur d’arrière-plan souhaitée. Ajoutez une bordure à cet élément et définissez son remplissage.

Regardez ici un exemple: http://jsbin.com/abanek/1/edit

Ce serait une solution CSS appropriée qui fonctionne également pour IE8 / 9 (IE8 avec html5shiv ofcourse): codepen

 nav { margin:0px auto; height:50px; background-color:gray; padding:10px; border:2px solid red; position: relative; color: white; z-index: 1; } nav:after { content: ''; background: black; display: block; position: absolute; margin: 10px; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } 

Je voudrais juste envelopper l’en-tête avec une autre div et jouer avec les frontières.

 

Foo

CSS:

 .header-border { border: 2px solid #000000; } .header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; } 

Il n’y a pas de fonctionnalité exacte pour ce faire.

Sans envelopper un autre élément à l’intérieur, vous pouvez remplacer la bordure par un ombrage et le remplissage par la bordure. Mais rappelez-vous que l’ombre de la boîte n’ajoute rien aux dimensions de l’élément.

jsfiddle est vraiment lent, sinon j’appendais un exemple.

Vous pouvez faire un div sur le padding comme suit:

 
#paddingOne { width: 100; length: 100; background-color: #000000; margin: 0; z-index: 2; } #paddingTwo { width: 200; length: 200; background-color: #ffffff; margin: 0; z-index: 3;

la largeur, la longueur, la couleur d’arrière-plan, les marges et l’index z peuvent varier bien sûr, mais pour couvrir le remplissage, l’index z doit être supérieur à 0 pour qu’il recouvre le remplissage. Vous pouvez jouer avec le positionnement et changer son orientation. J’espère que cela pourra aider!

PS les divs sont html et les #paddingOne et #paddingTwo sont css (au cas où quelqu’un n’a pas compris ça 🙂