zoukankan      html  css  js  c++  java
  • CSS3笔记005

    第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>
    
    敬请关注个人微信公众号:测试工匠麻辣烫
  • 相关阅读:
    Charpter5 软件测试总结
    Charpter3 关于闰年测试
    Charpter2 新的测试用例
    Charpter1 等价类划分方法分析与应用
    软件测试第一周学习总结
    关于软件测试学习的心得
    软件测试-同行评审
    白盒测试
    黑盒测试
    Java实现的闰年测试程序
  • 原文地址:https://www.cnblogs.com/infuture/p/13547717.html
Copyright © 2011-2022 走看看