html div边框线怎么设置


本文摘自PHP中文网,作者青灯夜游,侵删。

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

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

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

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

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

效果图:

阅读剩余部分

相关阅读 >>

怎么解决Html <a>标签中文乱码问题

Html怎么实现table数据自动滚动

Html meta标签使用及属性的详细分析

Html和js实现简单的计算器

Html doctype有几种

什么是语义化的Html

图文详解Html页面中添加图片的三种方法

Html的<footer>标签

Html怎么隐藏样式

Html怎么注释单行

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...