シンプルへの道
前の章では、パディングの使用法は、ギフトのバブル領域 (つまり、保護領域) と同様に、テキスト領域に内側のマージンを追加することであることを学びました。ボックスの場合、ボックスは外側のボール紙のシェルがあります。これは Web 開発に対応する属性を持ちますか?
答えは明らかに「はい」です。今日の主役はボーダーです。次のコードを見てください:
rrree
border.png
効果は写真の通りで、オレンジ色の領域が境界線です。コードの境界線について考えてみましょう: 5px の実線のオレンジ色は何を意味しますか?このコード行は次のコードと同等です:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Border</title><style> div { width: 200px; height: 200px; background-color: red; border: 5px solid orange; }</style></head><body><div></div></body></html>別々に記述した場合、上記の 3 つのステートメントは必須です。OK、元のステートメントを分析できます。
以下のコードを見てみましょう:
/*定义边框宽度*/border-width: 5px;/*定义边框样式*//*solid为实线、dashed为虚线、dotted为点线*/border-style: solid;/*定义边框颜色*/border-color: orange;
そうです、私たちもできます特定の方向の境界線を個別に設定できるととても便利ですよね？
注: 境界線を使用すると、ボックスの領域が大きくなることがわかります。はい、境界線は外部に埋め込まれており、その存在は幅と高さに影響します。
創造は永遠です、お茶を飲みましょう...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
