Могу ли я добавить цвет фона только для заполнения?

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

Просто щепотка кода, где мне нужен цвет фона с заполнением:

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с радиусом распространения, установленным на то же значение, что и заполнение.

Скажем, значение padding равно 10px - set 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-index, конечно, могут варьироваться, но для того, чтобы покрыть отступ, z-index должен быть больше 0, чтобы он лежал поверх заполнения. Вы можете повозиться с позиционированием и тому подобным, чтобы изменить его ориентацию. Надеюсь, это поможет!

PS div - это html, а #paddingOne и #paddingTwo - css (на случай, если кто-то этого не понял :)