web-dev-qa-db-ja.com

CSSボーダー：オブジェクトエッジからの距離？

簡単な質問。私はいくつかのコードを書いていて、オブジェクト内の5pxであるdivに境界線を追加する方法があるかどうか興味がありました-divの実際のエッジではないように。 WC3をチェックしたところ、スペックは見当たりませんでしたが、見逃した可能性があります。

私の場合、divの内側に5pxの破線の境界線を使用して、divがサイトの残りの部分に縫い付けられているような効果を作成します。私はbackground-imageでかなり簡単にそれを行うことができますが、1行か2行のcssでそれができるのになぜKBを追加するのですか。

「border-position」や「border-distance」のようなものだと思います。

前もって感謝します。

csspositionborder
12
Will D. White

私はこれに似た物件に出くわしたことがないので、単純に「いいえ」と言わなければなりません。

しかし、それでは気分が悪いので、私が本当に提案できるのは、「縫い付けたい」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>

そして最後に A JS Fiddle demo

さて、この答えを再発見したばかりです（賛成票のおかげで！）、今、私はbox-shadowを使用して、実際のCSSのみの外部要素のないソリューションを提供できます。

#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 。

4番目のパラメーターはキーであり、要素自体が与えるのと同じ0を使用して、シャドウの「広がり」を定義します（3番目のパラメーターは「あいまいさ」/「拡散」を定義します。この場合はbackground-colorです）。 borderが要素内にあるという錯覚ですが、実際には要素の影が伸びていますfrom要素。

11
David Thomas

それがIEが癖モードで行っていたものです。CSS3ではbox-sizing 2つのモードを切り替えることができますが、現時点でサポートがどのようになっているのかわかりません。詳細については、 http://www.quirksmode.org/css/box.html を参照してください。

1
Mene