ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで枠線の色を設定する方法

CSSで枠線の色を設定する方法

青灯夜游
青灯夜游オリジナル
2021-10-12 17:58:2916704ブラウズ

メソッド: 1. border-color 属性は 4 つの境界線の色を同時に設定します; 2. border-top-color、border-bottom-color、border-left-color、および border -right-color 属性は個別に設定され、上下左右の境界線が設定されます。

CSSで枠線の色を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css set border color

方法 1: border-color 属性を使用して 4 つの境界線の色を同じに設定するtime

border-color プロパティは、要素のすべての境界線の表示部分の色を設定する短縮プロパティです。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.box{
				width: 280px;
				height: 62px;
				border-style:solid;
				border-color: red;
			}
		</style>	
	</head>
	<body>
		<div class="box">欢迎来到PHP中文网!</div>
	</body>
</html>

レンダリング:

CSSで枠線の色を設定する方法

方法 2: 上下左右の境界線をそれぞれ設定します

  • border-top-color プロパティ: 上の境界線の色

  • border-bottom-color プロパティ: 下の境界線の色

  • border-left-color 属性: 左の境界線の色

  • border-right-color 属性: 右の境界線の色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.box{
				width: 280px;
				height: 62px;
				border-style:solid;
				border-top-color:red;
				border-bottom-color:paleturquoise;
				border-left-color:palevioletred;
				border-right-color:darkcyan;
			}
		</style>	
	</head>
	<body>
		<div class="box">欢迎来到PHP中文网!</div>
	</body>
</html>

レンダリング:

CSSで枠線の色を設定する方法

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで枠線の色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。