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

Мне жаль всех, что это решение является истинным, где вы не должны на самом деле установить прокладку.

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) Set background-clip: content-box - это ограничивает фон только самим контентом (вместо того, чтобы покрывать как отступ, так и границу)

2) Добавить внутренний box-shadow с радиусом разброса, установленным на то же значение, что и заполнение.

так сказать, обивка 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-уловок, которые после

вы можете использовать фон-градиент для этого эффекта. На вашем примере просто добавьте следующие строки (это просто так много кода, потому что вы должны использовать префиксы):

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

Я бы просто обернуть заголовок с другим 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; }

нет точной функциональности для этого.

без обертывания другого элемента внутри, вы можете заменить границу на поле-тень и обивка по границе. Но помните, что поле-тень не добавляет к размерам элемента.

jsfiddle работает очень медленно, иначе я бы добавил пример.

вы можете сделать 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, чтобы он лежал поверх заполнения. Вы можете возиться с позиционированием и таким, чтобы изменить его ориентацию. Надеюсь, это поможет!

P. S. в ДИВС являются HTML и #paddingOne и #paddingTwo используют CSS (на случай, если кто не понял:)