Чи можу я додати колір тла лише для заповнення?

У мене є поле заголовка, що включає рамки та відступи та колір тла для цього поля, чи можу я змінити колір тла лише для заповненої області після межі, а потім такий самий колір фону для решти ширини (тобто сірий у даному коді) ?

Просто щіпка коду, де я хочу, щоб був кольором тла підбитий:

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

Інший варіант із чистим CSS буде приблизно таким:

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;
}

Демо тут

Мені шкода усім, що це рішення справжнє, де вам не потрібно фактично встановлювати відступ.

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

Що я зробив...

• Застосовано два градієнти на тлі, причому обидва мають один початковий і кінцевий кольори. Замість використання однотонного кольору. Причина в тому, що ви не можете мати два однотонні кольори для одного фону.
• Потім до кожного застосували різні властивості background-clip.
• таким чином, один колір поширюється на поле вмісту, а інший - на межу, виявляючи відступ.

Розумний, якщо я так кажу собі.

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;
}

Використовуйте background-clipі box-shadowвластивості.

1) Встановити background-clip: content-box- це обмежує фон лише самим вмістом (замість того, щоб охоплювати як відступ, так і межу)

2) Додайте внутрішній box-shadowз радіусом розповсюдження, встановленим на те саме значення, що і відступ.

Отже, скажімо, для заповнення встановлено 10 пікселів - box-shadow: inset 0 0 0 10px lightGreenщо зробить лише область прокладки світло-зеленою.

Демонстрація 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;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

Для детального підручника, що висвітлює цю техніку, див. Цей чудовий пост css-tricks

Для цього можна використовувати фонові градієнти. Для вашого прикладу просто додайте наступні рядки (це просто стільки коду, тому що ви повинні використовувати префікси постачальників):

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);

Не потрібно зайвої розмітки.

Якщо ви просто хочете мати подвійну рамку, ви можете використовувати контур і межу замість рамки та відступів.

Хоча ви також можете використовувати псевдоелементи для досягнення бажаного ефекту, я б не радив це робити. Псевдоелементи - це дуже потужний інструмент, який надає CSS. Якщо ви "витратите" їх на подібні речі, ви, мабуть, пропустите їх десь ще.

Я використовую псевдоелементи лише тоді, коли іншого шляху немає. Не тому, що вони погані, а навпаки, бо я не хочу марнувати свого Джокера.

відповіді говорили про всі можливі рішення

У мене є ще одна з BOX-SHADOW

ось це JSFIDDLE

і код

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;
}

він також підтримує IE9, тому краще, ніж градієнтне рішення, додайте відповідні префікси для більшої підтримки

IE8 не підтримує, яка ганьба!

Ви не можете встановити колір підбивки.

Вам доведеться створити елемент обгортки з потрібним кольором тла. Додайте межу до цього елемента та встановіть його відступ.

Шукайте тут приклад: http://jsbin.com/abanek/1/edit

Це було б правильним рішенням CSS, яке також працює для IE8 / 9 (IE8 з html5shiv звичайно): 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;
}

Для цього немає точної функціональності.

Без загортання іншого елемента всередину, ви можете замінити рамку тінню, а відступ - рамкою. Але пам’ятайте, що поле-тінь не додає розмірів елемента.

jsfiddle дуже повільний, інакше я б додав приклад.

Я б просто обернув заголовок іншим div і пограв у межі.

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS:

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

Ви можете зробити div над заповненням наступним чином:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#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;

ширина, довжина, колір тла, поля та z-індекс можуть, звичайно, змінюватися, але для того, щоб покрити відступ, z-індекс повинен бути вище 0, щоб він лежав над відступом. Ви можете возитися з позиціонуванням і таким, щоб змінити його орієнтацію. Сподіваюся, це допоможе!

PS, divs є html, а #paddingOne та #paddingTwo - це css (на випадок, якщо хтось цього не отримає :)