CSS の境界線についての深い理解-htmlチュートリアル-php.cn

CSS の境界線についての深い理解

迷茫

リリース： 2017-03-25 10:28:47

オリジナル

1371 人が閲覧しました

境界線のプロパティ

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

フルーツ）、太い（5px）

2.border-style: 異なる値があります

a.solid: 三角形と台形が実現できます

以下の分析は、異なる値を適用したものです。

<!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>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>

ログイン後にコピー

b.dashed :dotted line、chrome/Firefoxブラウザでは点線と実線の比率が3:1(細い)、IEブラウザでは2:1(密)です

c.dotted: dotted line, in chrome /In the Firefox browser, it is a square dot, in the IE browser, it is around dot (丸いドットを使用して角丸効果を実現できます)

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. 背景画像を配置するときに境界線を使用します。背景画像は配置時に境界線を計算しないためです。

5. 境界線を使用して同じ高さのレイアウトを実現しますが、欠点はサポートされていないことです。幅のパーセンテージ

( 4 と 5 は似ていますが、いずれも境界線を使用して特定の辺からの距離を固定します)

以上がCSS の境界線についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。