패딩에만 배경색을 추가 할 수 있습니까?

패딩에만 배경색을 추가 할 수 있습니까?

---

테두리 및 패딩 및 해당 상자의 배경색을 포함하는 헤더 상자가 있습니다. 테두리 뒤의 패딩 된 영역에 대해서만 배경색을 변경 한 다음 나머지 너비에 대해 동일한 배경색을 변경할 수 있습니까 (예 : 지정된 코드에서 회색) ?

패딩 된 배경색을 원하는 코드의 꼬집음 :

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패딩과 동일한 값으로 설정된 스프레드 반경으로 내부 를 추가하십시오 .

따라서 패딩이 10px-설정이라고 가정하면 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);

불필요한 마크 업이 필요하지 않습니다.

If you just want to have a double border you could use outline and border instead of border and padding.

While you could also use pseudo-elements to achieve the desired effect, I would advise against it. Pseudo-elements are a very mighty tool CSS provides, if you "waste" them on stuff like this, you are probably gonna miss them somewhere else.

I only use pseudo-elements if there is no other way. Not because they are bad, quite the opposite, because I don't want to waste my Joker.

---

the answers said all the possible solutions

I have another one with BOX-SHADOW

here it is JSFIDDLE

and the code

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

it also support in IE9, so It's better than gradient solution, add proper prefixes for more support

IE8 dont support it, what a shame !

---

You can't set colour of the padding.

You will have to create a wrapper element with the desired background colour. Add border to this element and set it's padding.

Look here for an example: http://jsbin.com/abanek/1/edit

---

This would be a proper CSS solution which works for IE8/9 as well (IE8 with 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;
}

---

I'd just wrap the header with another div and play with borders.

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

---

There is no exact functionality to do this.

Without wrapping another element inside, you could replace the border by a box-shadow and the padding by the border. But remember the box-shadow does not add to the dimensions of the element.

jsfiddle is being really slow, otherwise I'd add an example.

---

You can do a div over the padding as follows:

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

the width, length, background color, margins, and z-index can vary of course, but in order to cover the padding, the z-index must be higher than 0 so that it will lay over the padding. You can fiddle with positioning and such to change its orientation. Hope that helps!

P.S. the divs are html and the #paddingOne and #paddingTwo are css (in case anyone didn't get that:)

참고URL : https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding