ホームページ > 記事 > ウェブフロントエンド > CSSで枠線のサイズと色を設定する方法
CSSで枠線のサイズと色を設定する方法
- 青灯夜游オリジナル
- 2021-11-09 16:47:5910894ブラウズ
CSS で境界線のサイズと色を設定する方法: 1. border-width 属性を使用して要素の境界線のサイズを設定します (構文は "border-width: width value;"; 2. を使用します) border-color 属性を使用して境界線の色を設定します。構文は「border-color: color value;」です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
すべての HTML 要素はボックスとして表示できます。CSS では、「ボックス モデル」という用語がデザインとレイアウトで使用されます。
CSS ボックス モデルは、本質的には、マージン、ボーダー、パディング、実際のコンテンツなどの周囲の HTML 要素をカプセル化するボックスです。
ボックス モデルを使用すると、他の要素と周囲の要素の境界線の間のスペースに要素を配置できます。
CSS で境界線のサイズと色を設定します
CSS で境界線のサイズを設定します
css では、border-width 属性を使用して要素の境界線のサイズを設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
margin: 20px;
}
.box1 {
border: 1px solid red;
}
.box2 {
border: 5px solid red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
css の境界線スタイルの設定
css では、border-color 属性を使用して境界線の色を設定できます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
margin: 20px;
border: 2px solid red;
}
.box1 {
border-color: paleturquoise;
}
.box2 {
border-color: goldenrod;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
（学習ビデオ共有: css ビデオ チュートリアル ）
以上がCSSで枠線のサイズと色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで上の境界線を削除する方法次の記事：CSSで上の境界線を削除する方法