CSSのborder属性について詳しく紹介します。-CSSチュートリアル-php.cn

CSSのborder属性について詳しく紹介します。

高洛峰

リリース： 2017-03-19 14:30:24

オリジナル

2339 人が閲覧しました

1.border-width: パーセンテージをサポートしません、キーワードをサポートします、細 (1px)、中 (デフォルト値、3px)、デフォルト値が 3px である理由は、境界線が次の場合にのみです。 3px 以上の border-style は、

<!DOCTYPE html><html><head>
    <title>用solid实现三角和梯形</title>
    <meta charset="utf-8">
    <style type="text/css">
        .triangle{
            width: 0px;
            height: 0px;
            border-style:solid;
            border-width: 50px;
            border-color: red transparent transparent transparent;

        }
        .trapezia{
            width: 40px;
            height: 40px;
            border-style: solid;
            border-width: 50px;
            border-color:transparent transparent green transparent ;
            margin-top: 10px;
        }
    </style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html>

ログイン後にコピー

b.dashed: 破線、Chrome/Firefox ブラウザでは破線と実線の比率が 3:1 (細)、

IE ブラウザ

では、比率は 2:1 (密) です

c.dotted: 点線、Chrome/Firefox ブラウザーでは正方形のドット、IE ブラウザーでは丸いドットです (丸いドットを使用して丸みを実現できます)効果)

d.double: 二重線、計算ルール、二重線の幅は常に等しく、中間の間隔は +-1 例: 3px=1 (内側) + 1 (中間の間隔) + 1。 (外側)、3 本のバーのグラフィックを実現できます。
e.inset (インセット)、outset (外側の凸)、ridge (溝): 時代遅れのスタイル、互換性の低さ、使用シナリオなし

3.border-color: 色が指定されていない場合、境界線として色を使用します。この機能を使用すると、リンクの色が変わるときに CSS スタイルコードを簡素化できます。例:

<!DOCTYPE html><html><head>
    <title>鼠标移动时边框颜色的改变</title>
    <meta charset="utf-8">
    <style type="text/css">
        .a{
            width: 30px;
            height: 30px;
            padding: 20px;
            margin:30px;
            color: red;
            border:1px solid;
        }
        .a:hover{
            color: blue;/*            border:1px solid;*/        }

    </style></head><body><p class="a">哈哈</p></body></html>

ログイン後にコピー

4. 背景画像は配置時に境界線を計算しないため、境界線を使用します。欠点は、パーセンテージをサポートしていないことです。幅

(4、5 も同様ですが、どちらも境界線を使用して特定の辺からの距離を固定します)

以上がCSSのborder属性について詳しく紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。