ホームページ > 記事 > ウェブフロントエンド > CSSのborder-topプロパティの使い方
CSSのborder-topプロパティの使い方
- silencementオリジナル
- 2019-05-26 14:19:075910ブラウズ
border-top 属性の定義と使用法
css では、border-top 属性は要素を配置するために使用される短縮属性です。上記の境界線のすべてのプロパティは 1 つのステートメントで定義されており、要素上の境界線の表示効果を個別に設定したい場合は、CSS の border-top 属性を使用してこれを実現できます。
border-top 属性によって定義される上枠属性: border-top-width (上枠の幅)、border-top-style (上枠のスタイル)、border-top-color (上枠の色) 。
border-top 属性の構文形式
css 構文: border-top:border-top-width border-top-style border-top-color; (例: border-top:1px 単色赤;)
JavaScript 構文: style.borderTop="border-top-width border-top-style border-top-color";(例: style.borderTop="border-top:1px sold red;")
説明
border-top 属性に設定されていない属性値があります。例: border-top: Solid red; も可能です。ただし、上枠スタイル (border-top-style) が以前に設定されていない場合、border-top 属性の 2 番目のパラメータも省略され、border-top 属性は無効になります。つまり、境界線の表示効果を設定するには、要素の境界線を定義する必要があります (デフォルトの要素の境界線は透明です)。透明な境界線の色または幅を設定すると、表示効果は表示されません。
border-top 属性値の説明
border-top-width: 上部の境界線の幅を設定します
border-top-style上境界線のスタイル
border-top-color 上境界線の色を設定します
inherit: 親要素から border-top 属性値を継承します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top属性设置上边框的显示效果笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:10px;width:300px;}
#a{border-top:1px solid red;}
#b{border-top:solid #FFCCCC;}
#c{border-top:5px solid;}
</style>
</head>
<body>
<div id = "a">border-top:1px solid red;</div>
<div id = "b">border-top:solid #FFCCCC;</div>
<div id = "c">border-top:5px solid;</div>
</body>
</html>以上がCSSのborder-topプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。