web-dev-qa-db-ja.com

div内に境界線を設定する方法

Div内に「ボーダー」を使用してdivを作成する方法があるかどうかだけを考えていました。つまり、たとえば200pxのdivがあり、境界線が200ピクセル以内に収まるようにしたいのです。

図形のエッジではなく、5px内側に境界線があるdivの効果を達成する必要があります。画像は何百もの言葉を話すことができます

これ欲しい：

circle inside-borded

これが私のコードです：

http://jsfiddle.net/hpLYD/1/

CSS：

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid blue;
}

パディングプロパティは、境界線を含むdiv全体を拡張しています。

CSSだけを使用してその効果をどのように達成できますか？出来ますか？

csshtmlborderpadding
11
pwnjack

CSS3プロパティ box-shadow を使用してこれを行うことができます。 CSSに以下を追加します。

box-shadow: 0px 0px 0px 5px #f00;

jsFiddleの例

18
j08691

最も良い方法はボックスシャドウですが、境界線が200pxを超えないようにする必要があることを人々が忘れているようです。これを実際に実現するには、box-shadow属性でinsetパラメータを使用できます（これにより、内側の影が作成されます）。

また、サイズがコンテンツではなくボーダーに比例するように、box-sizingをborder-boxに変更する必要もあります。

これが結果を示すJSFiddleです

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid red;
    box-shadow: 0px 0px 0px 5px blue inset;
    box-sizing: border-box;
}
6
Daniel Perván
<div class="mydiv"></div>

.mydiv{
  position:relative;
  height:150px;
  width:200px;
  background:#f00;
}
.mydiv:before{
  position:absolute;
  content:'';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left:10px;
  right: 10px;
  border:1px solid #daa521;
}

これが結果を示すJSFiddleです

enter image description here

2
Dishan TD

要素内にボーダーを配置することはできませんが、 box-shadow その効果を与えるには：

.circle {
    border-radius: 50%;
    width: 190px;
    height: 190px;
    background: red;
    border: 3px solid blue;
    box-shadow:  0px 0px 0px 10px red; /* 10px box-shadow */
}

JSFiddleの例 。

ただし、これはCSS3スタイルのプロパティであり、すべてのブラウザでサポートされているわけではありません。一部のブラウザーではベンダープレフィックスを使用する必要がある場合もあります（-webkit、-mozなど）。サポートについて http://caniuse.com/#search=box-shadow を確認してください。

1
James Donnelly

サークルに別のクラスを追加できると思います。

私はあなたのためにこれをしました。

丸みを帯びたボーダーにパディングを追加することはできないと思います（引用してはいけません）が、約30秒でフィドルを行いました。

.scirle {see fiddle}

http://jsfiddle.net/hpLYD/7/embedded/result/

0
Ben

問題は、国境が私たちが好きかどうかに関わらず、画面の領域を占有することです。

1pxの境界線が100px要素上にある場合、それを内部に表示できたとしても、その要素は98pxのみになります。しかし、私たちが実際に行き詰まっているのは、100px要素であり、実際には、外側の境界線によって引き起こされる102pxです。最新のChrome-境界線ボックスは境界線に対して何もしないようです-それらは常に外側に表示されます。

これを解決する簡単な方法は、絶対配置のCSS :afterまたは:before要素を使用することです。これは基本的に、境界によって画面スペースが失われないことを意味します。例を参照してください：

.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
0
rorymorris