11月9日边框
1.11月3日前端需要学习的知识、自闭合标签、meta标签、div标签2.11月6日标题标签、图片标签、链接标签、段落标签3.11月6日列表、标题、表格、基本、块级标签以及特殊符号4.11月7日form表单与input框以及select标签5.11月7日css介绍、基本格式、样式、选择器6.11月8日字体的属性7.11月9月label标签补充8.11月9月字体的属性2以及div模块的另一种用法9.11月9日背景属性
10.11月9日边框
11.11月9日display属性12.11月10日css盒子模型的margin和padding属性13.11月10日浮动float以及清除浮动clear14.11月10日overflow属性以及圆形头像的制作15.11月10月高度和长度的另外四种情况16.11月10日定位属性17.11月10日模态框和透明18.11月12日基础的网页设计以及阴影的设计box-shadow属性19.11月12日js的基础引入和注释20.11月13日js语言常量与变量21.11月13日js数据类型以及常见的方法22.11月13日布尔值(Boolean)23.11月13数组以及数组常用发法24.11月14日i++以及++i以及逻辑运算符25.11月14日流程控制26.11月14日三元运算27.11月14日函数的定义28.11月15日函数作用域和闭包函数29.11月16日自定义对象类型30.12月27日JSON对象31.12月29日正则对象32.12月29日正则对象33.2024-1-2bom对象34.2024-1-2 DOM概念以及部分用法35.2024-1-4事件36.2024-1-17 jq的简介、基础语法、选择器、部分操作37.2024-1-18文档处理38.2024-1-19事件绑定，input与hover事件39.2024-1-19阻止事件40.2024-1-19事件冒泡41.2024-1-22页面加载和事件委托42.2024-1-22动画效果和部分方法边框
边框有三个属性：
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>
效果如图
