一天搞定CSS:边框border--02
每一个标签都是一个盒子,具体见HTML教程
因此,每一个标签有大小,有边框
1.border样式:单一样式
2.border样式:复合样式
border: 粗细 类型 颜色;
3.border方向
4.代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
/*单一样式*/
border-color: red;
border-width: 4px;
border-style: solid;
/*复合样式*/
border: 4px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框方向:以top为例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
/*单一样式*/
border-top-color: red;
border-top-width: 4px;
border-top-style: solid;
/*复合样式*/
border-top: 4px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>