Puis-je ajouter de la couleur d'arrière-plan seulement pour le rembourrage?
J'ai un en-tête de la boîte, y compris de la frontière et de remplissage et couleur de fond de cette boîte,
puis-je changer la couleur d'arrière-plan seulement pour le collier de la région après la frontière, puis la même couleur d'arrière-plan pour le reste de la largeur (c'est à dire gris dans le code donné)?
Juste une pincée de code où je veux le collier de couleur d'arrière-plan:
nav {
margin:0px auto;
width:100%;
height:50px;
background-color:grey;
float:left;
padding:10px;
border:2px solid red;
}
- Je ne le pense pas, mais j'aimerais tort. (J'imagine que vous auriez besoin de nid d'un élément.)
- Non, vous avez raison David.
- je souhaite la même chose! permet de voir..
- EliGassert umm.. ensuite le wat puis-je faire pour obtenir la boîte de couleurs différentes à l'intérieur?
- découvrez ma réponse, IL PEUT ÊTRE FAIT.
- Aujourd'hui, ceci peut être fait via le
background-clip
etbox-shadow
propriétés de démo ici
Vous devez vous connecter pour publier un commentaire.
Une autre option avec pur CSS serait quelque chose comme ceci:
Démo ici
width: 100%;
position:relative;
je peux voir si elle n'est pas placé alors, il n'apparaît pas à l'écran!.. mais comment cela fonctionne?position: relative
etposition: absolute
d'interférer sur les autres éléments de mon site web.Je suis désolé tout le monde que c'est la solution la vraie où vous n'avez pas à réellement le rembourrage.
http://jsfiddle.net/techsin/TyXRY/1/
Ce que j'ai fait...
Malin si je le dis à moi-même.
transition: all 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: padding 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
Utiliser le
background-clip
etbox-shadow
propriétés.1) Définir
background-clip: content-box
- ce qui limite l'arrière-plan uniquement pour le contenu lui-même (plutôt que de couvrir à la fois le remplissage et la bordure)2) Ajouter une intérieure
box-shadow
avec la propagation du rayon de la même valeur que le rembourrage.Donc dire que le rembourrage est 10px - set
box-shadow: inset 0 0 0 10px lightGreen
- qui fera seulement le rembourrage de la zone de lumière verte.Codepen démo
CSS:
HTML:
Pour une bonne tutoriel qui couvre cette technique voir cette grande css-tricks post
0 0 0
veux dire?0 0 0
définit lah-shadow
v-shadow
etblur
à 0, comme l'horizontal de l'ombre, à la verticale de l'ombre et le flou de distance ne sont pas nécessaires à cette mise en œuvre. C'est juste un solide ombre qui va vers l'intérieur (inset
) pour10px
.Vous pouvez utiliser le fond-les dégradés à cet effet. Pour votre exemple, il suffit d'ajouter les lignes suivantes (il est juste tellement de code parce que vous avez à utiliser des fournisseurs de préfixes):
Pas besoin d'élément de balisage.
Si vous voulez juste avoir une bordure double, vous pouvez utiliser le contour et la frontière au lieu de frontière et de rembourrage.
Alors que vous pourriez aussi utiliser des pseudo-éléments pour obtenir l'effet désiré, je ne vous le conseille. Pseudo-éléments sont un outil très puissant CSS, si vous "déchets" sur des trucs comme ça, vous êtes probablement va me manquer ailleurs.
Je n'utilise que des pseudo-éléments, si il n'y a pas d'autre moyen. Non pas parce qu'ils sont mauvais, bien au contraire, parce que je ne veux pas perdre mon Joker.
les réponses a dit toutes les solutions possibles
J'en ai une autre avec BOX-SHADOW
ici, il est JSFIDDLE
et le code
il supporte également dans IE9, donc C'est mieux que le gradient de la solution,
ajouter bon préfixes pour plus de soutien
IE8 ne pas le soutenir, quelle honte !
Vous ne pouvez pas définir la couleur du rembourrage.
Vous aurez à créer un wrapper élément avec l'arrière-plan de couleur. Ajouter une bordure à cet élément et l'ensemble de rembourrage.
Regardez ici pour un exemple: http://jsbin.com/abanek/1/edit
Ce serait un bon CSS solution qui fonctionne pour IE8/9 (IE8 avec html5shiv bien sûr): codepen
J'avais juste envelopper la tête avec un autre div et de jouer avec les frontières.
CSS:
<nav>
, comment puis-je ajouter des classes qui?<nav>
peut avoir des classes. Jetez un oeil à @mookamafoob réponse. En fait je ne le ferai pas comme ça que je suis inquiet de la prise en charge du navigateur. Mais si vous préférez HTML5/CSS3, c'est la façon de le faire.Il n'y a aucune fonctionnalité pour ce faire.
Sans emballage un autre élément à l'intérieur, vous pouvez remplacer la frontière par un box-shadow et le rembourrage de la frontière. Mais n'oubliez pas le box-shadow de ne pas augmenter les dimensions de l'élément.
jsfiddle est vraiment lent, sinon je serais ajouter un exemple.
Vous pouvez faire un div sur le rembourrage comme suit:
la largeur, la longueur, la couleur d'arrière-plan, les marges et les z-index peut varier, bien sûr, mais dans le but de couvrir le remplissage, le z-index doit être supérieur à 0 alors qu'il se trouvait sur le rembourrage. Vous pouvez jouer avec le positionnement et l'exemple pour changer son orientation. Espérons que ça aide!
P. S. les divs sont le html et le #paddingOne et #paddingTwo sont css (dans le cas où quelqu'un n'a pas:)