Arka plan rengini yalnızca dolgu için ekleyebilir miyim?

Bu kutu için kenarlık, dolgu ve arka plan rengini içeren bir başlık kutum var, arka plan rengini yalnızca kenarlıktan sonraki dolgulu bölge için ve ardından genişliğin geri kalanı için aynı arka plan rengini değiştirebilir miyim (yani verilen kodda gri) ?

Dolgulu arka plan rengini istediğim kodda bir tutam:

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

Saf CSS ile başka bir seçenek şunun gibi bir şey olabilir:

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

Demo burada

Herkese özür dilerim, dolguyu gerçekten ayarlamak zorunda olmadığınız gerçek çözüm budur.

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

Ne yaptım ...

• Arka planda bir başlangıç ​​ve bitiş rengine sahip iki degrade uygulandı. Düz renk kullanmak yerine. Tek bir arka plan için iki düz renge sahip olamamanın nedeni.
• Sonra her birine farklı arka plan klibi özelliği uyguladı.
• böylece bir rengin içerik kutusuna ve diğerinin kenarlığa uzanmasını sağlayarak dolguyu ortaya çıkarır.

Kendi kendime söylersem akıllıca.

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-clipVe box-shadowözelliklerini kullanın .

1) Set background-clip: content-box- bu, arka planı yalnızca içeriğin kendisiyle sınırlar (hem dolguyu hem de sınırı örtmek yerine)

2) Bir iç box-shadow Yayılma yarıçapı dolgu ile aynı değere ayarlanmış .

Diyelim ki dolgu 10px - set box-shadow: inset 0 0 0 10px lightGreen - bu sadece dolgu alanını açık yeşil yapacak.

Codepen demosu

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>

Bu tekniği kapsayan kapsamlı bir eğitim için bu harika css-tricks gönderisine bakın

Bu efekt için arka plan gradyanlarını kullanabilirsiniz. Örneğiniz için sadece aşağıdaki satırları ekleyin (bu çok fazla koddur çünkü satıcı öneklerini kullanmanız gerekir):

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

Gereksiz işaretlemeye gerek yok.

Çift kenarlık istiyorsanız, border ve padding yerine anahat ve border kullanabilirsiniz.

İstenilen etkiyi elde etmek için sözde unsurları da kullanabilirsiniz, ancak buna karşı tavsiye ederim. Sözde öğeler, CSS'nin sağladığı çok güçlü bir araçtır, eğer onları böyle şeyler için "harcarsanız", muhtemelen onları başka bir yerde özleyeceksiniz.

Başka bir yolu yoksa yalnızca sözde öğeleri kullanırım. Kötü oldukları için değil, tam tersi, çünkü Joker'imi ziyan etmek istemiyorum.

cevaplar tüm olası çözümleri söyledi

BOX-SHADOW ile bir tane daha var

işte JSFIDDLE

ve kod

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'u da destekler, bu nedenle gradyan çözümünden daha iyidir, daha fazla destek için uygun önekler ekleyin

IE8 bunu desteklemiyor, ne yazık!

Dolgunun rengini ayarlayamazsınız.

İstenilen arka plan rengine sahip bir sarmalayıcı öğesi oluşturmanız gerekecektir. Bu öğeye kenarlık ekleyin ve dolgusunu ayarlayın.

Bir örnek için buraya bakın: http://jsbin.com/abanek/1/edit

Bu, IE8 / 9 için de çalışan uygun bir CSS çözümü olacaktır (tabi html5shiv ile IE8): 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;
}

Bunu yapmak için kesin bir işlevsellik yoktur.

İçine başka bir öğe sarmadan, sınırı bir kutu gölgesiyle ve dolguyu kenarlıkla değiştirebilirsiniz. Ancak kutu gölgesinin öğenin boyutlarına katkıda bulunmadığını unutmayın.

jsfiddle gerçekten yavaş oluyor, yoksa bir örnek eklerim.

Başlığı başka bir div ile sarar ve sınırlarla oynarım.

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

Dolgu üzerinde aşağıdaki gibi bir div yapabilirsiniz:

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

genişlik, uzunluk, arka plan rengi, kenar boşlukları ve z-endeksi elbette değişebilir, ancak dolguyu kapatmak için z-endeksinin dolgunun üzerine uzanması için 0'dan büyük olması gerekir. Yönünü değiştirmek için konumlandırma vb. İle oynayabilirsiniz. Umarım yardımcı olur!

PS div'ler html'dir ve #paddingOne ve #paddingTwo, css'dir (kimse bunu anlamamışsa :)