1、3边框border

这一片月

已于 2022-10-08 17:55:30 修改

阅读量851

点赞数

分类专栏：盒子模块文章标签： html css

于 2022-10-08 17:12:11 首次发布

本文链接：https://blog.csdn.net/qq_62865634/article/details/127212071

版权

盒子模块专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示：文章写完后,学到怎么设置一个漂亮的边框，边框颜色、边框粗细、边框实线、虚线、点线。

1、语法：

div{

border-width:2px;

border-style:"solid";

border-color:"red";

}

解释：

border边框我们可以设置，三部分：边框粗细

（1）、边框粗细

（2）、边框颜色

（3）、边框样式

单独写：

border-width 定义粗细，单位px（像素）

border-style 边框样式、实线、虚线、点线

border-color 边框颜色

边框border-style属性值：

solid 实体线

dashed 虚线

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>外边框border</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border-width: 5px;
            /* border-width表示边框、这个值小越细 */
            border-style: solid;
            /* border-style表示边框样式solid表示实线 */
            /* border-style: dashed; */
            /* 这个dashed是虚线 */
            /* border-style: dotted; */
            /* 这个dotted表示点线 */
            border-color: pink;
            边框颜色
        }
    </style>
</head>

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

</html>