<!doctype html>
<html>
<head>
<title>border</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
div{
width: 150px;
height: 150px;
float: left;
margin: 20px;
}
.red{
background-color: red;
border: 10px black solid;
/*border 邊框*/
/*solid 實心*/
}
.blue{
background-color: blue;
border-style: ridge solid dotted dashed;
/*四邊不同類型，由上右下左順序*/
/*ridge立體效果 solid 實心 dotted 圓點 dotted 虛線*/
border-width: 10px 15px 10px 15px;
border-color: green yellow red black;
}
.green{
background-color: green;
border-radius: 20px;
/*設定border-radius圓角(當設定為75px時會形成圓，因為div寬度為150)*/
}
</style>
</head>
<body>
<div class="red"> </div>
<div class="blue"> </div>
<div class="green"> </div>
</body>
</html>
留言列表
Impression (1)
