У меня есть поле заголовка, включая границу и дополнение и цвет фона для этого окна, можно ли изменить цвет фона только для заполненной области после границы и затем одного и того же цвета фона для остальной ширины (т.е. серого в данном коде)?
Просто щепотка кода, в котором я хочу добавить цвет фона:
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 с радиусом распространения, равным тому же значению, что и заполнение.
Так скажите, что заполнение 10px - установлено box-shadow: inset 0 0 0 10px lightGreen - это сделает только зону заполнения зеленой.
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>Вы можете использовать фоновые градиенты для этого эффекта. Для вашего примера просто добавьте следующие строки (это всего лишь код, потому что вы должны использовать префиксы поставщика):
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 of the course): 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; }
Для этого нет точной функциональности.
Без обертывания другого элемента внутри вы можете заменить рамку теневой коробкой и прописью по границе. Но помните, что box-shadow не добавляет к размерам элемента.
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. divs - html, а #paddingOne и #paddingTwo - css (в случае, если кто-то не получил это:)