У меня есть поле заголовка, включая границу, отступы и цвет фона для этого поля, могу ли я изменить цвет фона только для области с заполнением после границы, а затем тот же цвет фона для остальной части ширины (т.е. серый в данном коде) ?
Просто щепотка кода, где мне нужен цвет фона с заполнением:
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; }
Демо здесь
источник
width: 100%;
position:relative;
я вижу, если он не размещен, то он не отображается на экране! .. но как это работает?Мне очень жаль, что это истинное решение, в котором вам не нужно устанавливать отступы.
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; }
источник
transition: all 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
Используйте
background-clip
иbox-shadow
свойства.1) Установить
background-clip: content-box
- это ограничивает фон только самим контентом (вместо того, чтобы закрывать и отступы, и границу)2) Добавьте внутренний
box-shadow
с радиусом распространения, установленным на то же значение, что и заполнение.Скажем, значение padding равно 10px - set
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.
источник
0 0 0
значит?box-shadow
имеет четыре свойства. В0 0 0
устанавливаетh-shadow
v-shadow
иblur
0, в качестве горизонтальной тени, вертикальная тени и размытия расстояний являются ненужными в этой реализации. Это просто сплошная тень, идущая внутрь (inset
)10px
.Вы можете использовать фоновые градиенты для этого эффекта. Для вашего примера просто добавьте следующие строки (это просто так много кода, потому что вам нужно использовать префиксы поставщика):
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, конечно): 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; }
источник
<nav>
, как я могу добавить к ней классы?<nav>
можно заниматься. Взгляните на ответ @mookamafoob. На самом деле я не буду так делать, потому что беспокоюсь о поддержке браузером. Но если вы предпочитаете HTML5 / CSS3, это способ сделать это.Вы можете сделать 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-index, конечно, могут варьироваться, но для того, чтобы покрыть отступ, z-index должен быть больше 0, чтобы он лежал поверх заполнения. Вы можете повозиться с позиционированием и тому подобным, чтобы изменить его ориентацию. Надеюсь, это поможет!
PS div - это html, а #paddingOne и #paddingTwo - css (на случай, если кто-то этого не понял :)
источник