盒子模型border

最新推荐文章于 2024-08-03 09:43:52 发布

爱吃火锅的小boy

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量265

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_42900834/article/details/123165246

版权

1.border可以设置元素的边框，边框有三部分组成：边框宽度（粗细），边框样式（实线、虚线），边框颜色

2.border-style:solid实线边框

代码：

<!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>
           div{
                  width:300px;
                  height: 200px;

                  /* border-width 边框的粗细，一般用px做单位 */
                  border-width: 5px;

                 /* border-style 边框的样式，  solid实线边框 */
                 border-style: solid;
           }
    </style>

</head>

<body>
        <div></div>    
</body>

</html>

运行效果：

3.border-style:dashed虚线边框

代码：

<!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>
           div{
                  width:300px;
                  height: 200px;

                  /* border-width 边框的粗细，一般用px做单位 */
                  border-width: 5px;

                 /* border-style 边框的样式，  dashed虚线边框 */
                 border-style: dashed;
           }
    </style>

</head>

<body>
        <div></div>    
</body>

</html>

运行效果：

4. border-style:dotted点线

代码：

<!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>
           div{
                  width:300px;
                  height: 200px;
                  /* border-width 边框的粗细，一般用px做单位 */
                  border-width: 5px;
                 /* border-style 边框的样式，  solid实线边框 
                 border-style: solid;*/
                 /* border-style 边框的样式，  dashed虚线边框 
                 border-style: dashed;*/
                   /* border-style 边框的样式，  dotted点线边框*/
                 border-style: dotted;
           }
    </style>

</head>

<body>
        <div></div>    
</body>

</html>

运行效果：

5.在边框中添加颜色

代码：

<!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>
           div{
                  width:300px;
                  height: 200px;
                  /* border-width 边框的粗细，一般用px做单位 */
                  border-width: 5px;
                 /* border-style 边框的样式，  solid实线边框 
                 border-style: solid;*/
                 /* border-style 边框的样式，  dashed虚线边框 
                 border-style: dashed;*/
                /* border-style 边框的样式，  dotted点线边框*/
                 border-style: dotted;
              /* border-color 边框的颜色，  dotted点线边框*/
                 border-color: pink;
           }
    </style>

</head>

<body>
        <div></div>    
</body>

</html>

运行效果：