目录
边框
边框有三个属性：
border-width、border-style、border-color
1.border-width属性
此属性是用于设置边框线的宽度，单位为像素(px)、点(pt)、厘米(cm)等，常用取值有thin、medium和thick。
代码如下
border-width: 数字+px;
2.border-style属性
此属性设置为边框的样式，包括实线、虚线、点状线等
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
格式
border-style: 值
3.border-color属性
此属性可以设置边框的颜色
格式
border-color: 颜色名
三个属性在一起使用的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
border-width: 3px;
border-style: dotted;
border-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这个代码里面给div设置了高度和宽度方便体现边框感
效果如下
简写方式
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
border: 3px dashed blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下
还有一个特别的属性
border-radius属性
该属性是用于实现圆角边框的效果。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
border: 3px solid blue;
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如图
注意一点如果border-radius属性的大小等于高的属性或宽的属性的一半或者超过了，边框就会变成一个圆
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
border: 3px solid blue;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如图
