境界線のプロパティ
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 サイトの他の関連記事を参照してください。