96

要素のボーダー幅をパーセンテージで設定するには? 構文を試しました

border-width:10%;

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

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

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

4

9 に答える 9

88

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'

ご覧のとおり、Percentages: N/Aと表示されています。

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

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

  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>

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

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

于 2012-11-20T14:15:18.387 に答える
41

使用することもできます

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

また

border: 9vw solid #F5E5D6;
于 2016-04-14T11:22:20.517 に答える
25

これは古い質問ですが、まだ答えを探している人にとっては、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/

于 2014-05-27T02:02:50.227 に答える
5

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

例：

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
于 2015-11-16T18:23:51.617 に答える
4

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

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

于 2012-11-20T13:56:41.047 に答える
0

スパンを使用してカスタム ボーダーを作成できます。クラス (境界線の方向を指定) と 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;
}

次に、、、に対応class="VerticalBorder"するid を設定します(mdiv の幅は 100% の mheader の幅と等しいため、幅は設定したものの 100% になります。幅を 1% に設定すると、ボーダーはウィンドウの幅の 1% になります)。toに対応する id を設定します(ヘッダー コンテナー内にあるため、上部はヘッダーに従っている位置を参照します。下部に到達する場合は、これ + 高さを合計して 100% にする必要があります) 。(mdiv の高さは mheader の高さの 5 倍 [100% = 100、20% = 20、100/20 = 5] であるため、高さは設定したものの 20% になります。 1% にすると、境界線はウィンドウの高さの 0.2% になります)。これがどのように見えるかです：top:0%;left:0%;width:1%;class="HorizontalBorder"top:99%left:0%;height:1%

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/ .

于 2017-02-16T15:49:09.737 に答える
-2

calc() の仕様を見てください。使用例を次に示します。

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);
于 2018-03-21T13:01:57.550 に答える