有问题请联系站长!

首页>知识分享>电脑知识 / 正文

html div边框线怎么设置

时间:2022-06-27 来源:本站 作者:超级管理员 47 ℃

html div元素边框线可以使用border相关属性来设置:1、border属性同时设置上下左右边框样式;2、border-top、border-bottom、border-left和border-right属性分别设置上下左右边框样式。


CSS边框属性允许你指定一个元素边框的样式和颜色。


示例:


<!DOCTYPE html>


<html>


    <head>


        <meta charset="utf-8">


        <style type="text/css">


            div {


                width: 250px;


                margin: 50px 0px;


                padding: 20px 10px;


            }


            .box1{


                border: 1px solid red;


            }


            .box2{


                border-top: 1px solid green;


            }


            .box3{


                border-bottom: 1px solid green;


            }


            .box4{


                border-left: 1px solid green;


            }


            .box5{


                border-right: 1px solid green;


            }


 


        </style>


    </head>


 


    <body>


        <div class="box1">border属性设置使用边框样式</div>


        <div class="box2">border-top属性设置上边框样式</div>


        <div class="box3">border-bottom属性设置下边框样式</div>


        <div class="box4">border-left属性设置左边框样式</div>


        <div class="box5">border-right属性设置右边框样式</div>


    </body>


 


</html>


CSS边框属性

属性         描述

border 简写属性,用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。


Tags:  知识

众乐同知网-网络分享版权声明:

我们不提供互联网资讯,只是网络信息的分享和传播,为了内容的阅读便捷,为了追求世界上求真、求善、求美的初衷!凡是资讯必有转载出处或内容注明来源,转载版权请到来源网站查看相关信息!
①凡本网注明来源为“众乐同知”的所有文字、图片和音视频信息,版权均为众乐同知网(www.quyuanjingfu.com)所有,任何媒体、网站或个人在转载使用必须注明“来源:众乐同知”方可进行转载使用。
②本网转载并注明其来源的信息,是本着传递信息供大家阅读方便为目的,并不意味着赞同其观点或证实其内容的真实性。 其他媒体、网站或个人从本网转载使用的,请注明来源。如若产生纠纷,本网不承担其法律责任。
③ 如本网转载稿件涉及版权或内容问题,请与本站站长联系,如有虚假(需要提供信息本身虚假事实的有力证据)信息请向网站总监反映,关注“众乐同知”微信公众号,并提交你的信息诉求。

猜你喜欢


搜索
栏目分类
网站分类
标签列表