境界線の太さをパーセンテージで設定するにはどうすればよいですか？

Question 1

要素の境界線の幅をパーセンテージで設定するにはどうすればよいですか？構文を試しました

border-width:10%;

しかし、それは機能しません。

border-widthパーセンテージで設定する理由は、とを含む要素がwidth: 80%;ありheight: 80%;、その要素がブラウザウィンドウ全体をカバーするようにしたいので、すべての境界線を10％に設定したいからです。要素の背景が透明であり、要素を背後に配置すると透明度に影響するため、一方が他方の後ろに配置されて境界線として機能する2要素の方法ではこれを行いません。

これはJavaScriptを介して実行できることは知っていますが、可能であれば、CSSのみの方法を探しています。

Question 2

Borderはパーセンテージをサポートしていません...しかしそれでも可能です...

他の人がCSS仕様を指摘しているように、パーセンテージは境界線ではサポートされていません。

'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
  Value:          <border-width> | inherit
  Initial:        medium
  Applies to:     all elements
  Inherited:      no
  Percentages:    N/A
  Media:          visual
  Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

することができますように見ることは述べていますN / A：パーセント。

スクリプト化されていないソリューション

次のようなラッパー要素を使用して、パーセンテージの境界線をシミュレートできます。

ラッパー要素background-colorを希望の境界線の色に設定します
ラッパー要素paddingをパーセンテージで設定します（サポートされているため）
要素background-colorを白（または必要なもの）に設定します

これはどういうわけかあなたのパーセンテージの境界をシミュレートするでしょう。これは、この手法を使用する25％幅の側面境界を持つ要素の例です。

例で使用されているHTML

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

スニペットを展開

問題：要素に複雑な背景が適用されている場合、これははるかに複雑になることに注意する必要があります...特にその背景が祖先のDOM階層から継承されている場合。ただし、UIが十分に単純な場合は、この方法で実行できます。

スクリプトソリューション

@BoltClockは、要素サイズに応じて境界線の幅をプログラムで計算できるスクリプトソリューションについて言及しました。

これは、 jQueryを使用した非常に単純なスクリプトの例です。

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

<div class="content">
    This is the element to have percentage borders.
</div>

スニペットを展開

ただし、コンテナのサイズが変更されるたびに（つまり、ブラウザウィンドウのサイズが変更されるたびに）境界線の幅を調整する必要があることに注意する必要があります。ラッパー要素を使用した最初の回避策は、これらの状況で幅が自動的に調整されるため、はるかに簡単に思えます。

スクリプト化されたソリューションの良い面は、以前のスクリプト化されていないソリューションで説明したバックグラウンドの問題に悩まされないことです。

Question 3

使用することもできます

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;

または

border: 9vw solid #F5E5D6;

Question 4

したがって、これは古い質問ですが、まだ答えを探している人にとって、CSSプロパティのBox-Sizingはここでは貴重です。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box;

これは、Divの幅をパーセンテージに設定できることを意味し、divに追加する境界線はすべてそのパーセンテージに含まれます。したがって、たとえば、次の場合、divの幅の内側に1pxの境界線が追加されます。

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }

詳細情報が必要な場合：http：//css-tricks.com/box-sizing/

Question 5

パーセンテージ値はborder-widthCSSには適用されません。これは仕様に記載されています。

JavaScriptを使用して、要素の幅のパーセンテージまたは必要な長さの量を計算し、その結果をpx要素の境界線またはその境界線に適用する必要があります。

Question 6

ピクセルの代わりにパーセンテージにemを使用できます。

例：

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

Question 7

最新のブラウザは、ウィンドウビューポートのパーセンテージであるvhおよびvwユニットをサポートしています。

したがって、ウィンドウサイズのパーセンテージとして純粋なCSS境界線を設定できます。

border: 5vw solid red;

この例を試して、ウィンドウ幅を変更してください。ウィンドウのサイズが変わると、境界線の太さが変わります。box-sizing: border-box;役に立つかもしれません。

Question 8

ボックスのサイズ
設定ボックスのサイズ設定を境界線ボックスbox-sizing: border-box;に設定し、幅を100％に設定し、境界線の幅を固定してから、最小幅を追加して、小さな画面の場合、境界線が画面全体を追い越さないようにします。

Question 9

スパンを使用してカスタムボーダーを作成できます。クラス（境界線が進む方向を指定）とIDを使用してスパンを作成します。

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

次に、CSSに移動し、クラスをposition:absolute、height:100%（垂直方向の境界線の場合）、width:100%（水平方向の境界線の場合）、margin:0%およびに設定しbackground-color:#000000;ます。必要な他のすべてを追加します。

body{
    margin:0%;
}

div.mdiv{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0%;
}

header.mheader{
    position:absolute;
    width:100%;
    height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
    top:0%;
    left:0%;
    margin:0%;
}

span.HorizontalBorder{
    position:absolute;
    width:100%;
    margin:0%;
    background-color:#000000;
}

span.VerticalBorder{
    position:absolute;
    height:100%;
    margin:0%;
    background-color:#000000;
}

次いで、対応のためにそのIDを設定class="VerticalBorder"しtop:0%;、left:0%;、width:1%;mdivの幅は100％でmheaderの幅に等しいので（幅はあなたがそれを設定したものを100％になります。あなたは、1％までの幅を設定した場合境界線はウィンドウの幅の1％になります）。IDを設定することに対応class="HorizontalBorder"するtop:99%（それは、トップが、それはヘッダに応じている位置を指し、ヘッダコンテナにありますので。あなたはそれが底に到達したい場合、これが+高さが100％にならなければならない）、left:0%;およびheight:1%（mdivの高さはmheaderの高さの5倍であるため[100％= 100、20％= 20、100 / 20 = 5]、高さは設定した値の20％になります。高さを設定した場合1％まで、境界線はウィンドウの高さの.2％になります）。外観は次のとおりです。

span#Span1{
    top:0%;
    left:0%;
    width:.4%;
}
span#Span2{
    top:99%;
    left:0%;
    width:1%;
}

免責事項：ウィンドウのサイズを十分に小さいサイズに変更すると、境界線が消えます。解決策は、ウィンドウのサイズが特定のポイントに変更された場合に、境界線のサイズを制限することです。これが私がしたことです：

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}

すべてを正しく行った場合は、次のリンクのようになります。https： //jsfiddle.net/umhgkvq8/12/奇妙な理由で、境界線はjsfiddleで消えますが、ブラウザーで起動した場合は消えません。。

Question 10

calc（）の仕様を見てください。使用例は次のとおりです。

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);