一天搞定CSS:边框border--02

时间:2023-03-09 23:02:53
一天搞定CSS:边框border--02

每一个标签都是一个盒子,具体见HTML教程

因此,每一个标签有大小,有边框


1.border样式:单一样式

一天搞定CSS:边框border--02


2.border样式:复合样式

border: 粗细 类型 颜色;

一天搞定CSS:边框border--02


3.border方向

一天搞定CSS:边框border--02


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>