HTML+CSS基础入门-第十五天（CSS-边框属性）

最新推荐文章于 2024-05-23 16:52:46 发布

bree working

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量359

点赞数

分类专栏： html+css 文章标签： html css border 边框属性

本文链接：https://blog.csdn.net/qq_27261927/article/details/67637652

版权

border-style边框风格边框风格样式的属性值none：无边框solid：直线边框dashed：虚线边框dotted：点状边框double：双线边框依托boeder-color的属性值groove：凸槽边框依托boeder-color的属性值ridge：垄状边框依托boeder-color的属性值inset ： inset边框依托boeder-color的属性值out

摘要由CSDN通过智能技术生成

border-style边框风格

边框风格样式的属性值

none：无边框
solid：直线边框
dashed：虚线边框
dotted：点状边框
double：双线边框依托boeder-color的属性值
groove：凸槽边框依托boeder-color的属性值
ridge：垄状边框依托boeder-color的属性值
inset ： inset边框依托boeder-color的属性值
outset：outset边框依托boeder-color的属性值
inherit：继承

统一风格

border-style

代码

<!doctype html>
<body>
    <head>
        <title>边框属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:800px;
            height:500px;
            background:#CBEB14;
            }
            p{
            width:70px;
            height:100px;
             background:#E718B8;

            }
            .p1{

                border-style:solid;
                }
            .p2{

                border-style:dashed;

            }
            .p3{

                border-style:dotted;
            }
            .p4{

                border-style:double;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">solid</p>
            <p class="p2">dashed</p>
            <p class="p3">dotted</p>
            <p class="p4">double</p>
        </div>
    </body>

</body>

显示结果

15-1

单独定义某一方向的边框样式

border-bottom-style 下边边框的样式
border-top-style 上边边框的样式
border-leftm-style 左边边框的样式
border-right-style 右边边框的样式

代码

<!doctype html>
<body>
    <head>
        <title>边框属性</title>
        <meta charset="utf">

        <

最低0.47元/天解锁文章

bree working

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础入门-第十五天（CSS-边框属性）

border-style边框风格边框风格样式的属性值none：无边框solid：直线边框dashed：虚线边框dotted：点状边框double：双线边框依托boeder-color的属性值groove：凸槽边框依托boeder-color的属性值ridge：垄状边框依托boeder-color的属性值inset ： inset边框依托boeder-color的属性值out
复制链接

扫一扫