Tôi có thể thêm màu nền chỉ cho phần đệm không?

Tôi có một hộp tiêu đề bao gồm đường viền và phần đệm và màu nền cho hộp đó, tôi có thể thay đổi màu nền chỉ cho vùng đệm sau đường viền và sau đó là màu nền tương tự cho phần còn lại của chiều rộng (nghĩa là màu xám trong mã đã cho) ?

Chỉ cần một nhúm mã mà tôi muốn có màu nền được đệm:

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

Một tùy chọn khác với CSS thuần túy sẽ giống như sau:

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 tại đây

Tôi xin lỗi tất cả mọi người rằng đây là giải pháp đúng đắn mà bạn không cần phải thực sự đặt đệm.

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

Những gì tôi đã làm xong...

• Áp dụng hai gradient trên nền với cả hai màu bắt đầu và màu kết thúc. Thay vì sử dụng màu đặc. Lý do là bạn không thể có hai màu đồng nhất cho một nền.
• Sau đó, áp dụng thuộc tính background-clip khác nhau cho mỗi.
• do đó làm cho một màu mở rộng đến hộp nội dung và màu khác đến đường viền, để lộ phần đệm.

Thông minh nếu tôi nói như vậy với chính mình.

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

Sử dụng các thuộc tính background-clipvà box-shadow.

1) Đặt background-clip: content-box- điều này chỉ giới hạn nền trong chính nội dung (thay vì che cả phần đệm và đường viền)

2) Thêm một phần bên trong box-shadowvới bán kính trải rộng được đặt cùng giá trị với phần đệm.

Vì vậy, giả sử padding là 10px - set box-shadow: inset 0 0 0 10px lightGreen- sẽ chỉ làm cho vùng đệm có màu xanh lục nhạt.

Bản demo 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>

Để có hướng dẫn kỹ lưỡng về kỹ thuật này, hãy xem bài đăng thủ thuật css tuyệt vời này

Bạn có thể sử dụng màu nền cho hiệu ứng đó. Đối với ví dụ của bạn, chỉ cần thêm các dòng sau (nó chỉ là quá nhiều mã vì bạn phải sử dụng tiền tố nhà cung cấp):

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

Không cần đánh dấu liên tục.

Nếu bạn chỉ muốn có đường viền kép, bạn có thể sử dụng đường viền và đường viền thay vì đường viền và phần đệm.

Mặc dù bạn cũng có thể sử dụng các yếu tố giả để đạt được hiệu quả mong muốn, nhưng tôi khuyên bạn không nên sử dụng nó. Phần tử giả là một công cụ rất mạnh mà CSS cung cấp, nếu bạn "lãng phí" chúng vào những thứ như thế này, bạn có thể sẽ bỏ lỡ chúng ở một nơi khác.

Tôi chỉ sử dụng phần tử giả nếu không còn cách nào khác. Không phải vì họ xấu, hoàn toàn ngược lại, vì tôi không muốn lãng phí Joker của mình.

câu trả lời cho biết tất cả các giải pháp khả thi

Tôi có một cái khác với BOX-SHADOW

đây là JSFIDDLE

và mã

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

nó cũng hỗ trợ trong IE9, vì vậy tốt hơn là giải pháp gradient, hãy thêm tiền tố thích hợp để được hỗ trợ nhiều hơn

IE8 không hỗ trợ nó, thật đáng tiếc!

Bạn không thể đặt màu của phần đệm.

Bạn sẽ phải tạo một phần tử wrapper với màu nền mong muốn. Thêm đường viền vào phần tử này và đặt phần đệm của nó.

Hãy xem ví dụ ở đây: http://jsbin.com/abanek/1/edit

Đây sẽ là một giải pháp CSS thích hợp cũng hoạt động cho IE8 / 9 (IE8 với html5shiv dĩ nhiên): 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;
}

Không có chức năng chính xác để làm điều này.

Không cần bao bọc phần tử khác bên trong, bạn có thể thay thế đường viền bằng bóng hộp và phần đệm bằng đường viền. Nhưng hãy nhớ box-shadow không thêm vào kích thước của phần tử.

jsfiddle đang thực sự chậm, nếu không tôi sẽ thêm một ví dụ.

Tôi chỉ bọc tiêu đề bằng một div khác và chơi với các đường viền.

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

Bạn có thể thực hiện một div trên padding như sau:

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

tất nhiên chiều rộng, chiều dài, màu nền, lề và chỉ số z có thể thay đổi, nhưng để bao phủ phần đệm, chỉ số z phải cao hơn 0 để nó nằm trên phần đệm. Bạn có thể thử định vị và thay đổi hướng của nó. Hy vọng rằng sẽ giúp!

PS các div là html và #paddingOne và #paddingTwo là css (trong trường hợp bất kỳ ai không hiểu :)