CSSで枠線の色を設定する方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-10-12 17:58:29

オリジナル

16688 人が閲覧しました

メソッド: 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で枠線の色を設定する方法