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>
敬请关注个人微信公众号:测试工匠麻辣烫