在网页中，几乎所有的元素都可以定义边框，边框主要有三个属性，即宽度、外观和颜色，分别由 border-width、border-style、border-color 来控制（必需同时设置三个属性）。
一、整体样式
1、边框的属性
-
border-width：定义边框的宽度，取值是一个像素值；
-
border-style：定义边框的外观，常用取值如下： |属性值|说明| |---|---| |none|无样式| |dashed|虚线| |solid|实线|
-
border-color：定义边框的颜色，取值可以是关键字或者十六进制 RGB 值。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
width: 100px;
height: 100px;
border-width: 2px;
border-style: dashed;
border-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏览器中的效果为：
2、简写形式
对于代码：
div{
border-width: 2px;
border-style: dashed;
border-color: aquamarine;
}
可以简写为：
div{ border: 2px dashed aquamarine; }
二、局部样式
一个边框共有上下左右四条边，可以单独对某一条边进行样式指定。
以上边框为例，可写为：
border-top-width:2px;
border-top-style:solid;
border-top-color:red;
简写形式：border-top:2px solid red;
其它三个边框分别为：border-bottom、border-left、border-right。
有如下示例：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
width: 100px;
height: 100px;
border-top: 2px dashed aquamarine;
border-bottom: 3px solid rebeccapurple;
border-left: 2px dashed yellowgreen;
border-right: 3px solid wheat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏览器中显示为：
三、利用 border 画三角形
- step1：首先将 div 的宽度和高度都设为 0，然后设置四个边框的颜色和宽度：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
width: 0px;
height: 0px;
border-top: 50px solid aquamarine;
border-bottom: 50px solid rebeccapurple;
border-left: 50px solid yellowgreen;
border-right: 50px solid wheat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
得到如下效果：
- step2：将其中三个边框的颜色变为透明（transparent），便可得到三角形：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
width: 0px;
height: 0px;
border-top: 50px solid aquamarine;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
