1. 程式人生 > >HTML邊框設定相關知識

HTML邊框設定相關知識

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			width:300px;
			height:300px;
			border:10px dotted rgba(255,0,0,0.5);
		</style>
	</head>
	<body>
		<!--
			邊框(border)的組成
				1.邊框的粗細
					1px
				2.邊框的樣子
					solid		實線
					dashed		虛線
					dotted		點劃線(不同瀏覽器顯示的是不一樣的)
				3.邊框的顏色
					red			顏色的英文單詞
					#f00		顏色的16進製表示方法
					rgba(255,0,0,0.5)	顏色的rgb的表示方法
		-->
		<div id="">
			
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			div{
				width:300px;
				height:300px;
				/*border:1px solid red;*/ /*複合樣式*/
				
				/*單一樣式*/
				border-width:1px 2px 3px 4px;
				border-style: solid dashed dotted solid;
				border-color: red gree blue black;
				
				/*
					border-width:1-px 2px 3px 4px
								 上邊   右邊  下邊 左邊
					border-style:solid dashed dotted solid
								  上邊       右邊      下邊       左邊
				 */ 
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>