CSS盒模型-4.3边框-border-style、border-width、border-color、--复合属性--border-top、right、bottom、left

最新推荐文章于 2024-04-10 23:15:12 发布

say hi.

最新推荐文章于 2024-04-10 23:15:12 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108264079

版权

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;】
小例子：

<!DOCTYPE html>
<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>

say hi.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型-4.3边框-border-style、border-width、border-color、--复合属性--border-top、right、bottom、left

1.边框围绕元素内容和边距的一条边线使用属性border代表边框我们可以使用边框属性精确控制这条线的样式、宽度、颜色2.边框样式使用border-style设置边框的样式属性还可分别设置上下左右四条边框的样式属性默认值为none，表示无边框还可以设置多种样式，分别为dotted（点状）、dasheed（虚线）、solid（实线，最常用）、double（双边线）、groove、ridge、inset、outset3.边框宽度使用border-width设置边框的宽度属性和边框样式一样，还
复制链接

扫一扫