[解決済み] ボーダーの太さをパーセントで設定するには？

質問

ある要素のボーダー幅をパーセントで設定するには？私は構文を試してみました

border-width:10%;

しかし、うまくいきません。

を設定したい理由は border-width をパーセンテージで表示させることができます。 width: 80%; と height: 80%; で、ブラウザのウィンドウ全体を覆うような要素にしたいので、すべてのボーダーを10%にしたいのです。要素の背景は透明で、要素を後ろに配置すると透明性に影響が出るため、片方をもう片方の後ろに配置してボーダーとして機能させる2要素方式では、このようなことはできません。

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

どのように解決するのですか？

ボーダーがパーセンテージに対応していない......でも可能です

他の方が指摘されているように 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'

このように 見る と書かれています。 パーセンテージ 該当なし .

ノンスクリプトで解決

あなたは、あなたのパーセンテージのボーダーを、あなたがするところのラッパー要素でシミュレートすることができます。

1. ラッパー要素の background-color を希望のボーダー色に変更します。
2. ラッパー要素の padding をパーセントで表示します（サポートされているため）。
3. 要素を設定する 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>

しかし、意識しておかなければならないのは 調整 ボーダー幅は コンテナサイズの変更 (例：ブラウザのウィンドウサイズ変更)。wrapper要素を使った最初の回避策は、このような状況でも自動的に幅を調整してくれるので、よりシンプルに思えます。

スクリプトによる解決策の良い点は、前回の非スクリプトによる解決策で述べた背景の問題に悩まされることがないことです。