CSS3笔记005 - 第05章 边框样式

第05章 边框样式

边框样式简介

边框宽度border-width
边框外观border-style:none无样式|dashed虚线|solid实线
边框颜色border-color

整体样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>边框属性</title>
		<style>
			div{
				border: 10px dashed blue; /*设置div整体样式*/
			}
		</style>
	</head>
	<body>
		<div>
			<h3>爱莲说</h3>
			<h5>作者：周敦颐</h5>
			<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
			<p id="p2">予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>	
		</div>
	</body>
</html>

局部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>边框属性</title>
		<style>
			div{
				border-top: 10px dashed red; /*上边框样式*/
				border-bottom: 4px dashed yellow; /*下边框样式*/
				border-left: 7px dashed blue; /*左边框样式*/
				border-right: 2px dashed green; /*右边框样式*/
			}
		</style>
	</head>
	<body>
		<div>
			<h3>爱莲说</h3>
			<h5>作者：周敦颐</h5>
			<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
			<p id="p2">予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>	
		</div>
	</body>
</html>
posted @ 2020-08-28 07:01  测试工匠麻辣烫  阅读(118)  评论(0)  编辑  收藏  举报