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

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

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

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

Ответы

Ответ 1

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

Но тогда мне было бы плохо для этого, поэтому все, что я мог бы предложить, - это обернуть 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 demo

Хорошо, только что заново открыл этот ответ (спасибо избирателю!), теперь я могу предоставить фактическое решение без посторонних элементов CSS-only, используя 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 находится внутри элемента, а на самом деле это тень элемента, выходящего из элемента.

Ответ 2

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