簡単な質問。私はいくつかのコードを書いていて、オブジェクト内の5pxであるdivに境界線を追加する方法があるかどうか興味がありました-divの実際のエッジではないように。 WC3をチェックしたところ、スペックは見当たりませんでしたが、見逃した可能性があります。
私の場合、divの内側に5pxの破線の境界線を使用して、divがサイトの残りの部分に縫い付けられているような効果を作成します。私はbackground-imageでかなり簡単にそれを行うことができますが、1行か2行のcssでそれができるのになぜKBを追加するのですか。
「border-position」や「border-distance」のようなものだと思います。
前もって感謝します。
私はこれに似た物件に出くわしたことがないので、単純に「いいえ」と言わなければなりません。
しかし、それでは気分が悪いので、私が本当に提案できるのは、「縫い付けたい」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;
}
4番目のパラメーターはキーであり、要素自体が与えるのと同じ0
を使用して、シャドウの「広がり」を定義します(3番目のパラメーターは「あいまいさ」/「拡散」を定義します。この場合はbackground-color
です)。 border
が要素内にあるという錯覚ですが、実際には要素の影が伸びていますfrom要素。
それがIEが癖モードで行っていたものです。CSS3ではbox-sizing
2つのモードを切り替えることができますが、現時点でサポートがどのようになっているのかわかりません。詳細については、 http://www.quirksmode.org/css/box.html を参照してください。