ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS の境界線についての深い理解
CSS の境界線についての深い理解
- 迷茫オリジナル
- 2017-03-25 10:28:471372ブラウズ
境界線のプロパティ
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 サイトの他の関連記事を参照してください。