边框
属性名称 | 设定值 | 说明 |
border-style | none | 不显示边线(默认值) |
dotted | 点线 | |
dashed | 虚线 | |
solid | 实线 | |
double | 双线 | |
border-width | 长度 | border-width:0.2cm 0.3cm 0.4cm 0.5cm |
像素 | ||
border-color | 十六进制 | border-color:上 右 下 左线的颜色 |
英文 | border-color:red(四边均为红色) | |
border-color:red green(上下为红色,左右为绿色) | ||
border-color:red green blue(上为红色、左右为绿色、下为蓝色) | ||
border-color:red green blue yellow(上右下左分别为红绿蓝黄) |
简化写法:border:式样 长度 颜色;
<!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>
<style type="text/css">
img{
width:200px;
/*更改图片的尺寸*/
border-width:10px;
border-color:black;
border-style:double;}
</style>
</head>
<body>
<img src="image.jpg" />
</body>
</html>
边界
padding属性:
属性名称 | 设定值 | 说明 |
padding-bottom | 像素/百分比 | 元件下端与边界的空隙 |
padding-left | 像素/百分比 | 元件左端与边界的空隙 |
padding-right | 像素/百分比 | 元件右端与边界的空隙 |
padding-top | 像素/百分比 | 元件上端与边界的空隙 |
margin属性:
属性名称 | 设定值 | 说明 |
margin-bottom | auto | 自动调整空隙 |
像素/百分比 | 设置下端空隙 | |
margin-left | auto | |
像素/百分比 | ||
margin-right | auto | |
像素/百分比 | ||
margin-top | auto | |
像素/百分比 |
padding与margin的区别:padding是设置内部元件与本身边界的距离,而margin是设置本身与外部边界的距离。
<!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>
<style type="text/css">
td{font-size:20px;font-family:幼圆;padding-top:20px;}
table{margin-top:50px;}
</style>
</head>
<body>
<table bgcolor="pink" border="1" width="300" height="200" cellspacing="0" cellpadding="0">
<tr><td valign="top">CSS边框与边界</td></tr>
</table>
</body>
</html>