Границы CSS: расстояние от края объекта? - PullRequest
Новая
       11

Границы CSS: расстояние от края объекта?

12 голосов
/ 21 февраля 2011

Быстрый вопрос. Я писал какой-то код и мне было любопытно, есть ли способ добавить границу для div, который составляет 5px внутри объекта - как не на самом краю div. Я проверил WC3 и не увидел никаких спецификаций - но, возможно, я его пропустил.

В моем случае я бы использовал пунктирную границу 5px внутри div, чтобы создать эффект, похожий на div, пришитый к остальной части сайта. Я могу сделать это довольно легко с background-image, но зачем добавлять KB, если это может сделать одна или две строки css.

Я бы предположил, что это будет что-то вроде "border-position" или "border-distance".

Заранее спасибо.

Ответы [ 2 ]

11 голосов
/ 21 февраля 2011

Я никогда не сталкивался с какой-либо собственностью, похожей на эту, поэтому мне пришлось бы просто сказать «нет».

Но тогда я бы чувствовал себя плохо из-за этого, поэтому все, что я мог бы действительно предложить, - это обернуть div, который вы хотите 'пришить', в другой div и стилизовать родительский элемент с тем же background-color для эмуляции смотри ты после. Вот некоторые css для возможного дубля: 

.wrap {
    border-width: 0;
    background-color: #ffa;
    width: 50%;
    padding: 0.5em;
}

.wrap #panel {
    background-color: inherit;
    height: 6em;
    border: 5px dashed #f90;
    text-align: center;
}

И немного html: 

<div class="wrap">
    <div id="panel">
        <p>This panel should look kinda sewn-on.</p>
    </div>
</div>

И, наконец, Демонстрация JS Fiddle

Ладно, только что заново открыв этот ответ (спасибо голосующему!), Я могу теперь предоставить реальное решение только для CSS без посторонних элементов, используя box-shadow: 

#panel {
    background-color: #ffa;
    height: 6em;
    border: 5px dashed #f90;
    text-align: center;
    width: 50%;
    margin: 30px auto 0 auto;
    box-shadow: 0 0 0 15px #ffa;
}​

JS Fiddle demo .

Четвертый параметр - это ключ, он определяет «распространение» тени (третий параметр определяет «размытость» / «диффузию», которая в данном случае равна 0), используя тот же background-color поскольку сам элемент создает иллюзию, что border находится внутри элемента, тогда как на самом деле это тень элемента, простирающаяся от элемента.

1 голос
/ 21 февраля 2011

Это то, что IE делал в режиме причуд.С помощью CSS3 box-sizing вы можете переключаться между двумя режимами, но я не уверен, какова поддержка в настоящее время. См. http://www.quirksmode.org/css/box.html для получения дополнительной информации.

...