web-dev-qa-db-ja.com

CSSインセットの境界線

CSSボーダーについて簡単に質問します。

単色の差し込み枠を作成する必要があります。これは私が使用しているCSSです。

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

残念ながら、3Dの境界線が作成されます（正方形と暗い説明ボックスは無視してください）：

http://dl.dropbox.com/u/12147973/border-current.jpg

これが目標です。

http://dl.dropbox.com/u/12147973/border-boal.jpg

何か案は？

htmlcsscss3border
62
JacobTheDev

おそらく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>

Edited私はばかであることに気付き、最も簡単な解決策を提供するのを忘れていたためfirst、それ以外の場合は空の子要素を使用して、背景に境界線を適用します。

#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では、box-shadowに4番目のpxパラメーターを追加できます。これは、拡散を行い、彼の画像をより簡単に反映します。

#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>
130
David Thomas

box-sizingを使用することをお勧めします。

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }
34
Stefan Hans Schonert

要素内にボーダーインセットを作成するために私が見つけた唯一の解決策は（そしてこのスレッドのすべての提案を役に立たなかった）、: beforeなどの擬似要素を使用することです

例えば。

.has-inset-border:before {
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  width: 10px;
  border: 4px dashed red;
}

境界線は常にすべての外側にあるため、ボックスサイズプロパティは機能しません。

Box-shadowオプションには、実際には機能せず、それほど広くサポートされていないという2つのデメリットがあります（気になる場合は、レンダリングにより多くのCPUサイクルがかかります）。

11
podperson

これは古いトリックですが、これを行う最も簡単な方法は、負の値でoutline-offsetを使用することです（以下の例では-6pxを使用しています）。これが fiddle です。外側の境界線を赤に、アウトラインを白にして、2つを区別しています。

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>
9
Vanessa King

境界線が要素の内側にあることを確認したい場合は、使用できます

box-sizing:border-box;

これにより、要素の内側に次の境界線が配置されます。

border: 10px solid black;

（box-shadowで追加パラメータinsetを使用した場合と同様の結果が得られますが、これは実際の境界用であり、他の何かに引き続きシャドウを使用できます。）

上記の別の回答への注意：特定の要素のbox-shadowでinsetを使用するとすぐに、その要素で最大2つのボックスシャドウに制限され、さらにシャドウイングするためにラッパーdivが必要になります。

どちらのソリューションも、望ましくない3D効果を取り除く必要があります。また、両方のソリューションがスタック可能であることに注意してください（2018年に追加した例を参照）

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
4
Chris S.

あなたが何と比較しているかわかりません。

しかし、他の非境界線アイテムと比較して境界線をはめ込むための非常に簡単な方法は、border: ?px solid transparent;を境界線のないアイテムnotに追加することです。

ボーダー付きのアイテムがはめ込まれます。

http://jsfiddle.net/cmunns/cgrtd/

2
Adam Munns

あなたはこれを行うことができます：

.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}
0
Gustavo Lopez

だから私はホバーに境界線を表示しようとしていましたが、メインメニューの下部バー全体を移動しました

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

これが他の人の助けになることを願っています。

0
Derrik de Moei

擬似要素を使用したシンプルなSCSSソリューション

ライブデモ： https://codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
        display: flex;
        height: 100px;
        width: 100%;
        position: relative;
        background-color: #f2f2f2;
        box-sizing: border-box;
        
        // Use pseudo-element to create inset border
        &:before {
                position: absolute;
                content: ' ';
                display: flex;
                border: $border-width solid black;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                border: $border-width solid black;
                // Important: We must deduct border size from width and height
                width: calc(100% - $border-width); 
                height: calc(100% - $border-width);
        }
}
<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>
0
Vladimir Jovanović

Background-clip：border-box;を使用できます。

例：

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>
0
Jaha Ganiev

box-sizingがオプションではない場合、これを行う別の方法は、サイズ付き要素の子にすることです。

デモ

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }


HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>
0
Adam Grant