web-dev-qa-db-ja.com

境界線外のCSS

Divの外側に境界線を描画できるようにしたい！だから私のdivが20px 20pxだとすると、この外側に1pxの境界線が必要です（したがって、本質的には22x22pxのdivが得られます）。

Div 22x22を最初から作成できることは理解していますが、理由があるため、境界線は外側にある必要があります。

CSSアウトラインは機能しますが、ボーダーボトムまたはボーダートップのものだけが欲しいので、アウトラインボトムのような、機能しないものが欲しいです。

これを行う方法はありますか？

ありがとう

cssborder
49
user1083320

2つのプロパティについて少し理解していると思います。境界線は要素の外側のエッジに影響し、要素のサイズが異なります。アウトラインは、要素のサイズや位置を変更せず（スペースをとらない）、境界の外側に移動します。説明から、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に重なります。

詳細については、こちらをご覧ください。
境界線
概要

56
Bear In Hat

アウトラインプロパティを試す W3Schools-CSS Outline

アウトラインは、要素/ divの幅と長さを妨げません。

下部にあるリンクをクリックして、実際のデモをご覧ください。さまざまな方法でボーダーを作成できます。要素！別の回答で述べたように、毎回余分なdivを追加する必要はありません！

境界線とアウトラインを組み合わせたり、必要に応じてボックスシャドウ（リンク経由でも表示）を組み合わせることもできます。

<head>
   <style type="text/css" ref="stylesheet">
      div {
        width:22px;
        height:22px;
        outline:1px solid black;
      }
   </style>
</head>
<div>
    outlined
</div>

通常、デフォルトでは、 'border：'は、 'inset'値を使用しない限り、幅の外側に境界線を配置して測定し、寸法全体に追加します。

div {border: inset solid 1px black};

しかし、「outline：」は境界線の外側の余分な境界線であり、もちろん要素に余分な幅/長さを追加します。

お役に立てれば

PS：私はあなたのためにこれを作ることに触発されました： 境界線、アウトライン、ボックスシャドウを使用

12
Benjaroo

IsisCodeはあなたに良いソリューションを提供します。別の方法は、ボーダーdivinside親divを配置することです。この例を確認してください http://jsfiddle.net/A2tu9/

UPD：疑似要素:after（:before）も使用できます。この場合、HTMLは追加のマークアップで汚染されません：

.my-div {
    position: relative;
    padding: 4px;
    ...
}
.my-div:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 1px #888 solid;
}

デモ： http://jsfiddle.net/A2tu9/191/

11
dfsq

単にbackground-clipを使用しないのはなぜですか？

-webkit-background-clip: padding;
   -moz-background-clip: padding;
        background-clip: padding-box;

見る：
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip

8
K-Gun

少し遅れましたが、同様の問題に遭遇しました。
私の解決策は擬似要素でした。追加のマークアップはなく、幅に影響を与えずに境界線を描画できます。
。

以下を参照してください、 JSFiddle here 。

.hello {
    position: relative;
    /* Styling not important */
    background: black;
    color: white;
    padding: 20px;
    width: 200px;
    height: 200px;
}

.hello::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
    z-index: -1;
}
6
chrisdhanaraj

Divを別のdiv内に置き、n padding/marginの量で外側のdivに境界線を適用します。ここでnはそれらの間に必要なスペースです。

4
IsisCode