一：边框
1.border
属性：
border-width：边框的粗细
border-style：主要有none，solid，double，dotted，dashed
border-color
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div { 8 width: 400px; 9 height: 300px; 10 border-width: 1px; 11 border-style: solid; 12 border-color: red; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
3.连写
没有顺序要求的。
一般是粗细，style，颜色
4.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div { 8 width: 400px; 9 height: 300px; 10 border: 1px solid red; 11 } 12 </style> 13 </head> 14 <body> 15 <div></div> 16 </body> 17 </html>
5.边框的四边分别设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
400px;
height: 300px;
border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px dashed yellow;
border-right: 1px dotted green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 input { 8 border:0; 9 border-bottom:1px dashed red; 10 } 11 </style> 12 </head> 13 <body> 14 用户名：<input type="text"> 15 </body> 16 </html>
7.效果
二：内边距
1.说明
使用padding
2.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
200px;
height: 100px;
border: 1px solid red;
padding: 10px;
}*/
a {
height: 35px;
background-color: #ccc;
display: inline-block;
line-height: 35px;
color: #fff;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<!-- <div>人生啊</div> -->
<a href="#">首页</a>
<a href="#">移动客户端</a>
</body>
</html>
3.效果
