ฉันสามารถเพิ่มสีพื้นหลังสำหรับช่องว่างภายในได้หรือไม่?

ฉันมีกล่องส่วนหัวซึ่งรวมถึงเส้นขอบและช่องว่างภายในและสีพื้นหลังสำหรับกล่องนั้นฉันสามารถเปลี่ยนสีพื้นหลังเฉพาะบริเวณเบาะหลังเส้นขอบแล้วใช้สีพื้นหลังเดียวกันกับส่วนที่เหลือของความกว้าง (เช่นสีเทาในรหัสที่กำหนด) เหรอ?

เพียงแค่บีบรหัสที่ฉันต้องการสีพื้นหลังเบาะ:

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/

ฉันทำอะไรลงไป ...

• ใช้การไล่ระดับสีสองสีบนพื้นหลังโดยทั้งคู่มีสีเริ่มต้นและสีสุดท้าย แทนที่จะใช้สีทึบ. เหตุผลที่คุณไม่สามารถมีสองสีทึบสำหรับพื้นหลังเดียวได้
• จากนั้นใช้คุณสมบัติคลิปพื้นหลังที่แตกต่างกันกับแต่ละคุณสมบัติ
• จึงทำให้สีหนึ่งขยายไปยังกล่องเนื้อหาและอีกสีหนึ่งเป็นเส้นขอบเผยให้เห็นช่องว่างภายใน

ฉลาดถ้าฉันพูดกับตัวเอง

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- ซึ่งจะทำให้เฉพาะพื้นที่ padding เป็นสีเขียวอ่อน

การสาธิต 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-tips ที่ยอดเยี่ยมนี้

คุณสามารถใช้การไล่ระดับสีพื้นหลังสำหรับเอฟเฟกต์นั้นได้ สำหรับตัวอย่างของคุณเพียงแค่เพิ่มบรรทัดต่อไปนี้ (เป็นรหัสมากเพราะคุณต้องใช้คำนำหน้าผู้ขาย):

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 ofcourse): 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 จึงจะวางทับช่องว่างภายในได้ คุณสามารถเล่นซอกับการวางตำแหน่งและอื่น ๆ เพื่อเปลี่ยนการวางแนว หวังว่าจะช่วยได้!

ป.ล. div เป็น html และ #paddingOne และ #paddingTwo เป็น css (ในกรณีที่ใครไม่เข้าใจ :)