CSS盒模型-4.3边框-border-style、border-width、border-color、--复合属性--border-top、right、bottom、left
1.边框
围绕元素内容和边距的一条边线
使用属性border代表边框
我们可以使用边框属性精确控制这条线的样式、宽度、颜色。
2.边框样式
使用border-style设置边框的样式属性
一般我们简写 border: 1px solid red;
还可分别设置上下左右四条边框的样式属性
默认值为none，表示无边框
还可以设置多种样式，分别为dotted（点状）、dasheed（虚线）、solid（实线，最常用）、double（双边线）、groove、ridge、inset、outset
3.边框宽度
使用border-width设置边框的宽度属性
和边框样式一样，还可以分别设置上下左右四条边框的宽度
不常使用 3 种标准边框：thin、dium、thick（加粗了）
最常使用长度值作为宽度属性的属性值
4.边框颜色
使用border-color设置边框的颜色
还可分别设置上下左右四条边框的颜色
和背景颜色属性一样，可以直接设置颜色名、十六进制颜色值或rgb函数值
5.复合属性（即理解为：可以使用多个属性去设置上边框）
复合是指一次使用多种样式定义边框
可以使用border-top、border-right、border-bottom、border-left分别定义四条边框的所有属性，属性值是样式、宽度和颜色，其中宽度和颜色可以省略，样式不能省略
还可以直接使用border属性，一次性对四条边框同时设置，属性值同样是样式、宽度和颜色，其中宽度和颜色可以省略，样式不能省略
例如：
.box { border-style :solid ;}
.box1{ border-width :5px ;}
.box2{ border-color :red ;}
.box3{ border-top :1px dashed #00ff00 ;}
.box4{ border :1px dotted #0000ff ;}
【自己总结：边框设置灵活随意，以下写法都是可以的】
【/* border:double; /
/ border :1px dotted #0000ff ; /
/ border-width: 10px; /
/ border-width: 10px 20px ; /
/ 上dashed 右solid 下double 左！solid /
/ border-style: dashed solid double; /
/ border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: darkorange; */
border-bottom: 5px double #5d6be9;】
小例子：
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>边框title><style>.box {border-style: dashed;border-width: 10px;border-color: aqua;}.box2 {/* 复合属性 *//* border-bottom: 5px solid red; 指定一条下边框*/border: 10px dashed #0000ff;/*同时设置四条边框*/}style>
head>
<body><div class="box">华为云在线教育div><div class="box2">华为云在线教育div>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！