BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS インセットボーダー

2022-03-02 18:57:51

質問

無地の差し込み枠を作りたいのですが、どうすればいいですか？これは、私が使用しているCSSのビットです。 

border: 10px inset rgba(51,153,0,0.65);

残念ながら、これでは3Dの畝のあるボーダーが出来てしまいます（四角や暗い説明欄は無視してください）。

解決方法は？

を使用することができます。 box-shadow もしかしたら 

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}



#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}

<div id="something"></div>

の背景画像に重なるという利点があります。 div しかし、もちろん、それはぼやけています。 box-shadow プロパティ)を使用します。を構築するために density の影を追加することができます。 

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}



#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

<div id="something"></div>

編集 自分がバカであることに気づき、最もシンプルな解決策を提示するのを忘れたからだ。 まず つまり、空の子要素を使って、背景の上にボーダーを適用するのです。 

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}

<div id="something">
  <div></div>
</div>

編集 後 CoryDanielson氏のコメント（下記 :

<ブロッククオート

jsfiddle.net/dPcDu/2 では、4番目のpxパラメータを追加することができます。 box-shadow を使えば、見開きになり、より簡単に彼の画像を反映させることができます。 

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}

<div id="something"></div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します