1. ホーム
  2. css

[解決済み] CSSアウトサイドボーダー

2022-03-10 21:34:21

質問

Divの外側にボーダーを描画できるようにしたい! 例えば20px×20pxのDivの場合、その外側に1pxのボーダーを引きたいのです(要するに、22×22pxの大きなDivができるわけです)。

最初にdivを22x22にすればいいことは理解していますが、私の持っている理由から、ボーダーを外側にする必要があるのです。

CSSのアウトラインは機能しますが、私はborder-bottomまたはborder-topのシンジだけが欲しいので、機能しないoutline-bottomのようなものが私の欲しいものなのです。

このような方法はありますか?

ありがとうございます。

解決方法は?

2つのプロパティの理解が少しずれているようですね。 Borderは、要素の外側の縁に影響を与え、要素の大きさを変えるものです。アウトラインは、要素のサイズや位置を変更せず(スペースを取らない)、ボーダーの外側に出ます。 あなたの説明では、borderプロパティを使いたいようですね。

下の簡単な例をブラウザで見てください。

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

ボーダーが下の div を押し出しているのに、アウトラインが上の div を動かさず、アウトラインが下の div に実際に重なっていることに注目してください。

詳しくはこちらで解説しています。
ボーダー
概要