<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的边框</title>
<style>
/*
一、盒子模型（box model）：可以把 HTML 中所有的元素都理解成盒子。用于装内容的容器
目的就是为了将 HTML 文档中的内容进行归纳整理。方便管理，从而达到布局的效果。
内容区 content
边框 border
内边距 padding
外边距 margin
二、盒子的边框 border
边框由三个部分组成，缺一不可！
1.边框的宽度 border-width
可以分别设置四个边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width：10px 20px 30px 40px(上右下左)顺时针
border-width：10px 20px 30px上 左 右 下
border-width：10px 20px上下左右
2.边框的样式 border-style
可选值：
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
可以分别设置四个边框的样式
border-top-style
border-right-style
border-bottom-style
border-left-style
3.边框的颜色 boder-color
使用方式与border-width一模一样
三、边框的简写属性：border
border 属性可以设置边框所有的相关样式
border:border-width border-style border-color(顺序无要求)
top：
right：
bottom：
left：
*/
.box1{
width: 200px;
height: 200px;
background-color: #c7edcc;
/*边框的宽度*/
/*border-width: 10px;*/
/* border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px;*/
/*边框的样式*/
/*border-style:solid;*/
/* border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;*/
/*边框的颜色*/
/* border-color: red;*/
/*border-color: red yellow blue green;*/
/*边框的简写属性*/
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)