CSS盒子模型-內邊距 CSS盒子模型-邊框 CSS盒子模型-外邊距

時間 2019-11-24

標籤 css 盒子模型邊距邊框欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="neibianju.css" />
</head>

<body>
	<table border="1">
    	<tr>
        	<td>
            	padding內邊距
            </td>
        </tr>
    </table>
    <p>css邊框樣式</p>
    <div class="p1">css邊框樣式 圓角邊框</div>
    <div class="p2">css陰影效果</div>
</body>
</html>

/* CSS Document */
td{padding-top:100px;}
p {
	width:200px;
	padding-top:80px;
	text-align:center;
	border-top-style:groove;
	border-bottom-style:dotted;
	border-left-style:dashed;
	border-right-style:double;
	border-top-width:10px;
	border-bottom-color:#0F9;
	
	}
.p1{
	border-radius:10px;
	width:100px;
	
	background-color:#99F;
	text-align:center;
	border:2px solid blue;
	}
.p2{
	background-color:#39C;
	width:100px;
	height:100px;
	text-align:center;
	box-shadow:10px 10px 5px #9966CC;
		}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="waibianju.css" />
</head>

<body>
    <div class="container">
    	<div class="bd">
        	<div class="pd">
            	<div class="content">hello</div>
            </div>
        </div>
    </div>
</body>
</html>

/* CSS Document */
.container{
	margin:10px;
	width:200px;
	}
.bd{
	border-style:dotted;
	}
.pd{
	padding:10px;
	}
.content{
	background-color:blue;
	}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。