分享程序员开发的那些事...
更新时间：2022-09-07 23:18:20
开发者学堂课程【CSS 快速掌握： Border 属性】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9197
内容介绍
一、Border 简介
二、范例
border: 它是“边框”的意思
边框有三个要素:粗细、线型、颜色,
语法格式:
border: 粗细线型颜色;
说明：边框的颜色可以省略不写 但是如果不写的话就表式边框的颜色为黑色 其他的两个属性值不能不写 如果不写的话就不会显示边框
图中的代码如下：
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"><title边框
</title><style type="text/css">
.box{
width : 100px;height: 100px;
/*border:粗细线型颜色;*/border: 1px solid #f00;
}
</ style></head>
<body>
其实边框也是有四个方法的:
border-top: 上边框
border-right: 右边框。
border-bottom: 下边框
border-left: 左边框。
图中代码如下：
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>边框也是有方向的</title><style type="text/css">
.box{
width: 100px;height: 100px;/*上边框线*/
border-top: 10px solid #f00;/*右边框线*/
border-right: 10px dotted #oof; I
border-bottom : 10px dashed #of0;border-Left: 5px solid #000;
}
</style></ head>
<body>
<div class="box"></div>< / body>
</ html>